本發(fā)明涉及一種計算機技術領域，尤其涉及一種頁面的加載方法及裝置。

背景技術：

在現(xiàn)有的頁面加載方案中，當頁面有可能需要調用到某頁面組件時，需先將該頁面組件所依賴的資源文件(js文件、css文件)預先寫入頁面，且必須等這些資源文件加載完畢，才會向用戶響應首屏頁面。

然而，實際應用中，頁面中的某些頁面組件在首屏頁面加載時并沒有起到實質作用，但這些頁面組件的資源文件隨著首屏頁面加載會延長首屏頁面的加載時間，尤其對于頁面組件較多的首屏頁面，全部加載所有資源文件將會增大首屏頁面的加載負擔，降低首屏頁面的加載速度，造成用戶打開頁面的時間過長，影響用戶體驗。

技術實現(xiàn)要素：

本發(fā)明實施例提供了一種可根據(jù)用戶需求動態(tài)加載頁面組件的頁面的加載方法及裝置，可有效提高首屏頁面的加載速度。

本發(fā)明實施例的第一方面提供一種頁面的加載方法，包括：

針對頁面的頁面組件創(chuàng)建腳本文件，其中，所述腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與所述頁面組件關鍵字對應的頁面組件邏輯；

在頁面的加載過程中，加載所述腳本文件，以生成對應的頁面；

檢測用戶在所述頁面上的觸發(fā)操作，所述觸發(fā)操作用于請求調用某個或某些目標頁面組件；

在所述腳本文件中查找與所述觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；

執(zhí)行與所述頁面組件關鍵字對應的頁面組件邏輯，以加載所述目標頁面組件。

本發(fā)明實施例第二方面提供了一種頁面的加載裝置，包括：

創(chuàng)建單元，用于針對頁面的頁面組件創(chuàng)建腳本文件，其中，所述腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與所述頁面組件關鍵字對應的頁面組件邏輯；

加載單元，用于在頁面的加載過程中，加載所述腳本文件，以生成對應的頁面；

檢測單元，用于檢測用戶在所述頁面上的觸發(fā)操作，所述觸發(fā)操作用于請求調用某個或某些目標頁面組件；

查找單元，用于在所述腳本文件中查找與所述觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；

執(zhí)行單元，用于執(zhí)行與所述頁面組件關鍵字對應的頁面組件邏輯，以加載所述目標頁面組件。

本發(fā)明實施例提供的技術方案中，預先針對頁面的頁面組件創(chuàng)建腳本文件，其中，該腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與該頁面組件關鍵字對應的頁面組件邏輯；在頁面的加載過程中，加載該腳本文件，以生成對應的頁面；檢測用戶在頁面上的觸發(fā)操作，該觸發(fā)操作用于請求調用某個或某些目標頁面組件，在該腳本文件中查找與該觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字，并執(zhí)行與該頁面組件關鍵字對應的頁面組件邏輯，以加載目標頁面組件。因此相對于現(xiàn)有技術，本發(fā)明實施例在頁面初始加載過程中的無需全部加載頁面組件的所有資源文件，而只需加載腳本文件，以便在檢測到觸發(fā)操作時，再利用該腳本文件動態(tài)加載對應頁面組件，從而有效提高首屏頁面的加載速度，提升用戶體驗。

附圖說明

圖1為本發(fā)明實施例中頁面的加載方法的一個實施例示意圖；

圖2為本發(fā)明實施例中頁面的加載裝置的一個實施例示意圖；

圖3為本發(fā)明實施例中頁面的加載裝置的另一實施例示意圖。

具體實施方式

本發(fā)明實施例提供了一種可根據(jù)用戶需求動態(tài)加載頁面組件的頁面的加載方法及裝置，可有效提高首屏頁面的加載速度，以下分別進行詳細說明。

下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例。基于本發(fā)明中的實施例，本領域技術人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

此外，術語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對于這些過程、方法、產(chǎn)品或設備固有的其它步驟或單元。

需要說明的是，本發(fā)明實施例可以應用于多種瀏覽器工具，具體此處不一一列舉。

請參閱圖1，本發(fā)明實施例中頁面的加載方法的一個實施例包括：

101、針對頁面中的頁面組件創(chuàng)建腳本文件；

在本實施例中，該腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與該頁面組件關鍵字對應的頁面組件邏輯，即在該腳本文件中，針對每個頁面組件，包含對應的頁面組件關鍵字和對應的頁面組件邏輯。例如，針對頁面組件a可以包括如下內容：c.a＝function()，其中，“c.a”對應頁面組件a聲明的頁面組件關鍵字，“function()”對應頁面組件a定義的頁面組件邏輯。

可以理解的是，在本實施例中，該腳本文件的數(shù)量不限，可以為一個或者多個，在實際應用中，為了節(jié)省資源或者提高首屏頁面的加載速度，可以優(yōu)選將腳本文件設置為一個?？蛇x地，該腳本文件可以為js文件，以供瀏覽器調用。

在本實施例中，頁面組件是指一系列作用于頁面，以產(chǎn)生不同的頁面效果的代碼，該頁面組件可以為一個或者多個，具體此處不做限定。在實際應用中，頁面組件的選取可根據(jù)實際需求從頁面關聯(lián)的所有頁面組件中選取，可以選取上述所有頁面組件中的全部或者部分，通常，頁面組件可以選取非首屏頁面對應的頁面組件，以便無需用戶進行觸發(fā)操作便可快速加載首屏頁 面。

102、在頁面的加載過程中，加載該腳本文件，以生成對應的頁面；

在本實施例中，在頁面的加載過程中，涉及該頁面組件的處理時，無需加載該頁面組件的資源文件，而只需加載該腳本文件，以生成對應的頁面。可以理解的是，在頁面的加載過程中，還包括其他頁面內容文件的處理，本領域技術人員可根據(jù)現(xiàn)有技術獲取其他頁面內容文件的加載過程，具體此處不再贅述。

在本實施例中，在加載腳本文件以及其他頁面內容文件后，便可生成可供用戶訪問的頁面，從而向用戶響應首屏頁面。

103、檢測用戶在頁面上的觸發(fā)操作；

其中，該觸發(fā)操作用于請求調用某個或某些目標頁面組件。

可選地，在本實施例中，檢測用戶在頁面上的觸發(fā)操作具體可以包括檢測用戶對頁面中預設按鈕的點擊操作，其中，一個預設按鈕可以對應一個目標頁面組件，也可以對應多個目標頁面組件。例如，用戶點擊按鈕A，對應的目標頁面組件為頁面組件a，用戶點擊按鈕B，對應的目標頁面組件為頁面組件b，具體此處對于按鈕與頁面組件的對應關系可根據(jù)實際需求設置，具體此處不做限定。

104、在腳本文件中查找與觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；

在本實施例中，腳本文件聲明有頁面組件的頁面組件關鍵字，由此，可根據(jù)頁面組件與頁面組件關鍵字的對應關系查找到觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字。

例如，目標頁面組件為頁面組件a，則在腳本文件中查到頁面組件a的頁面組件關鍵字，如步驟101中描述的“c.a”。

105、執(zhí)行與頁面組件關鍵字對應的頁面組件邏輯，以加載該目標頁面組件；

在本實施例中，頁面組件關鍵字用于建立目標頁面組件與頁面組件邏輯直接的關聯(lián)，以便根據(jù)目標頁面組件可以確定與該目標頁面組件對應的頁面組件邏輯。

可選地，在本實施例中，執(zhí)行與頁面組件關鍵字對應的頁面組件邏輯包括：

獲取調用目標頁面組件所需的參數(shù)；

加載該目標頁面組件所需的資源文件；

根據(jù)該參數(shù)和該資源文件加載該目標頁面組件。

可選地，資源文件可以包括js文件和/或css文件，并通過資源服務器加載對應的js文件和/或css文件。其中，js文件是用javascript腳本語言編寫的文件，css文件是用于控制頁面樣式并允許將樣式信息與頁面內容分離的一種標記性語言。

在本實施例中，對于用戶未點擊的按鈕，無需執(zhí)行對應的頁面組件的頁面組件邏輯。

本發(fā)明實施例提供的技術方案中，預先針對頁面的頁面組件創(chuàng)建腳本文件，其中，該腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與該頁面組件關鍵字對應的頁面組件邏輯；在頁面的加載過程中，加載該腳本文件，以生成對應的頁面；檢測用戶在頁面上的觸發(fā)操作，該觸發(fā)操作用于請求調用某個或某些目標頁面組件，在該腳本文件中查找與該觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字，并執(zhí)行與該頁面組件關鍵字對應的頁面組件邏輯，以加載目標頁面組件。因此相對于現(xiàn)有技術，本發(fā)明實施例在頁面初始加載過程中的無需全部加載頁面組件的所有資源文件，而只需加載腳本文件，以便在檢測到觸發(fā)操作時，再利用該腳本文件動態(tài)加載對應頁面組件，從而有效提高首屏頁面的加載速度，提升用戶體驗。

為便于理解，下面以一具體應用場景對上述實施例中描述的頁面的加載方法進行詳細描述：

首先通過腳本文件對選取的頁面組件a和頁面組件b的開發(fā)規(guī)范和調用方式進行預先約定，其中，頁面組件a所依賴的資源文件為a.js和a.css，頁面組件b所依賴的資源文件為b.js、b.css，具體包括：

針對頁面組件a和頁面組件b創(chuàng)建腳本文件c.js；其中，在腳本文件c.js中，包括以下內容：

c.a＝function1(){/**組件a定義的邏輯**/}；

c.b＝function2(){/**組件b定義的邏輯**/}。

其中，“c.a”對應頁面組件a聲明的頁面組件關鍵字；“function1()”對應頁面組件a定義的頁面組件邏輯；“c.b”對應頁面組件a聲明的頁面組件關鍵字；“function2()”對應頁面組件b定義的頁面組件邏輯；

在頁面的初始加載過程中，無需從資源服務器加載頁面組件a和頁面組件b，而只需加載腳本文件c.js，以生成對應的頁面，從而向用戶響應首屏頁面。

在頁面上設置有對應頁面組件a的按鈕A，對應頁面組件b的按鈕B；

當用戶點擊按鈕A時，在腳本文件查找與頁面組件a對應的頁面組件關鍵字“c.a”，并執(zhí)行function1()。

當用戶點擊按鈕B時，在腳本文件查找與頁面組件b對應的頁面組件關鍵字“c.b”，并執(zhí)行function2()。

由此，本發(fā)明實施例在頁面初始加載過程中的無需加載頁面組件的所有資源文件(a.js、a.css、b.js以及b.css)，而只需加載腳本文件，以便在檢測用戶的點擊操作時，再利用該腳本文件動態(tài)加載對應頁面組件a和頁面組件b，從而有效提高首屏頁面的加載速度，提升用戶體驗。

上面對本發(fā)明實施例中的頁面的加載方法進行了描述，下面對本發(fā)明實施例中的頁面的加載裝置進行描述，請參閱圖2，本發(fā)明實施例中頁面的加載裝置一個實施例包括：

創(chuàng)建單元201，用于針對頁面的頁面組件創(chuàng)建腳本文件，其中，所述腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與所述頁面組件關鍵字對應的頁面組件邏輯；

加載單元202，用于在頁面的加載過程中，加載所述腳本文件，以生成對應的頁面；

檢測單元203，用于檢測用戶在所述頁面上的觸發(fā)操作，所述觸發(fā)操作用于請求調用某個或某些目標頁面組件；

查找單元204，用于在所述腳本文件中查找與所述觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；

執(zhí)行單元205，用于執(zhí)行與所述頁面組件關鍵字對應的頁面組件邏輯，以 加載所述目標頁面組件。

為便于理解，下面以一具體應用場景為例，對本實施例中頁面的加載裝置內部運作流程進行描述：

創(chuàng)建單元201針對頁面的頁面組件創(chuàng)建腳本文件，其中，所述腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與所述頁面組件關鍵字對應的頁面組件邏輯；加載單元202在頁面的加載過程中，加載所述腳本文件，以生成對應的頁面；檢測單元203檢測用戶在所述頁面上的觸發(fā)操作，所述觸發(fā)操作用于請求調用某個或某些目標頁面組件；查找單元204在所述腳本文件中查找與所述觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；執(zhí)行單元205執(zhí)行與所述頁面組件關鍵字對應的頁面組件邏輯，以加載所述目標頁面組件。

本發(fā)明實施例提供的技術方案中，預先通過創(chuàng)建單元201針對頁面的頁面組件創(chuàng)建腳本文件，其中，該腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與該頁面組件關鍵字對應的頁面組件邏輯；由加載單元202在頁面的加載過程中，加載該腳本文件，以生成對應的頁面；并通過檢測單元203檢測用戶在頁面上的觸發(fā)操作，該觸發(fā)操作用于請求調用某個或某些目標頁面組件，由查找單元204在該腳本文件中查找與該觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字，并由執(zhí)行單元205執(zhí)行與該頁面組件關鍵字對應的頁面組件邏輯，以加載目標頁面組件。因此相對于現(xiàn)有技術，本發(fā)明實施例在頁面初始加載過程中的無需全部加載頁面組件的所有資源文件，而只需加載腳本文件，以便在檢測到觸發(fā)操作時，再利用該腳本文件動態(tài)加載對應頁面組件，從而有效提高首屏頁面的加載速度，提升用戶體驗。

可選地，在本實施例中，所述執(zhí)行單元205可以包括：

獲取模塊2051，用于獲取調用所述目標頁面組件所需的參數(shù)；

第一加載模塊2052，用于加載所述目標頁面組件所需的資源文件；

第二加載模塊2053，用于根據(jù)所述參數(shù)和所述資源文件加載所述目標頁面組件。

可選地，在本實施例中，所述檢測單元203，具體用于檢測用戶對所述頁面中預設按鈕的點擊操作。

可選地，在本實施例中，所述腳本文件為js文件。

可選地，在本實施例中，所述資源文件包括js文件和/或css文件。

上面從模塊化功能實體的角度對本發(fā)明實施例中的頁面的加載裝置進行描述，下面從硬件處理的角度對本發(fā)明實施例中的頁面的加載裝置進行描述，請參閱圖3，本發(fā)明實施例中頁面的加載裝置另一實施例包括：

輸入裝置301、輸出裝置302、處理器303和存儲器304(其中頁面的加載裝置中的處理器303的數(shù)量可以一個或多個，圖3中以一個處理器303為例)。在本發(fā)明的一些實施例中，輸入裝置301、輸出裝置302、處理器303和存儲器304可通過總線或其它方式連接，其中，圖3中以通過總線連接為例。

其中，通過調用存儲器304存儲的操作指令，處理器303，用于執(zhí)行如下步驟：

針對頁面的頁面組件創(chuàng)建腳本文件，其中，所述腳本文件聲明至少一個頁面組件的頁面組件關鍵字，并定義與所述頁面組件關鍵字對應的頁面組件邏輯；

在頁面的加載過程中，加載所述腳本文件，以生成對應的頁面；

檢測用戶在所述頁面上的觸發(fā)操作，所述觸發(fā)操作用于請求調用某個或某些目標頁面組件；

在所述腳本文件中查找與所述觸發(fā)操作所請求的目標頁面組件對應的頁面組件關鍵字；

執(zhí)行與所述頁面組件關鍵字對應的頁面組件邏輯，以加載所述目標頁面組件。

在本發(fā)明的一些實施例中，處理器303具體可以用于執(zhí)行以下步驟：

獲取調用所述目標頁面組件所需的參數(shù)；

加載所述目標頁面組件所需的資源文件；

根據(jù)所述參數(shù)和所述資源文件加載所述目標頁面組件。

在本發(fā)明的一些實施例中，處理器303具體可以用于執(zhí)行以下步驟：

檢測用戶對所述頁面中預設按鈕的點擊操作。

在本發(fā)明的一些實施例中，所述腳本文件包括js文件。

在本發(fā)明的一些實施例中，所述資源文件包括js文件和/或css文件。

所屬領域的技術人員可以清楚地了解到，為描述的方便和簡潔，上述描述的系統(tǒng)，裝置和單元的具體工作過程，可以參考前述方法實施例中的對應過程，在此不再贅述。

在本申請所提供的幾個實施例中，應該理解到，所揭露的系統(tǒng)，裝置和方法，可以通過其它的方式實現(xiàn)。例如，以上所描述的裝置實施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機械或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部單元來實現(xiàn)本實施例方案的目的。

另外，在本發(fā)明各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現(xiàn)，也可以采用軟件功能單元的形式實現(xiàn)。

所述集成的單元如果以軟件功能單元的形式實現(xiàn)并作為獨立的產(chǎn)品銷售或使用時，可以存儲在一個計算機可讀取存儲介質中?；谶@樣的理解，本發(fā)明的技術方案本質上或者說對現(xiàn)有技術做出貢獻的部分或者該技術方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質中，包括若干指令用以使得一臺計算機設備(可以是個人計算機，服務器，或者網(wǎng)絡設備等)執(zhí)行本發(fā)明各個實施例所述方法的全部或部分步驟。而前述的存儲介質包括：U盤、移動硬盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、磁碟或者光盤等各種可以存儲程序代碼的介質。

以上所述，以上實施例僅用以說明本發(fā)明的技術方案，而非對其限制； 盡管參照前述實施例對本發(fā)明進行了詳細的說明，本領域的普通技術人員應當理解：其依然可以對前述各實施例所記載的技術方案進行修改，或者對其中部分技術特征進行等同替換；而這些修改或者替換，并不使相應技術方案的本質脫離本發(fā)明各實施例技術方案的精神和范圍。