一種前端頁面加載的方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明所提供的一種前端頁面加載的方法及系統(tǒng)，通過首先將頁面資源進行分類，對分類出的頁面資源設(shè)置加載的優(yōu)先級順序，在加載前一類別的頁面資源時，預(yù)先在后臺獲取后一類別的頁面資源，使在前一類別的頁面資源加載完成后，后一類別的頁面資源在后臺已經(jīng)加載完成或者已經(jīng)加載了一部分，從而減少了在前端頁面進行加載時響應(yīng)的時間，并且加載的優(yōu)先級順序可以根據(jù)用戶的需求進行設(shè)置，因此本發(fā)明所述方法及系統(tǒng)為用戶在訪問頁面時提供方便。
【專利說明】一種前端頁面加載的方法及系統(tǒng)

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及移動通信領(lǐng)域，尤其涉及的是一種前端頁面加載的方法及系統(tǒng)。

【背景技術(shù)】
[0002]受互聯(lián)網(wǎng)帶寬的限制，互聯(lián)網(wǎng)產(chǎn)品在加載大量前端資源文件時，用戶需要等待比較長的時間。通常在面臨這種情況時，都是在加載大量前端資源文件時將頁面分塊布局，將整體頁面渲染分成多塊，以減少用戶在頁面第一屏的等待時間。但頁面整體加載時間并沒有減少，用戶仍然能看到頁面正在加載中。另一種做法，就是降低頁面效果，比如壓縮圖片、減少動畫效果等，這種做法的確能減少用戶的等待時間，但是用戶看到的頁面效果就比預(yù)想的效果要差一些了。
[0003]因此，現(xiàn)有技術(shù)有待于進一步的改進。


【發(fā)明內(nèi)容】

[0004]鑒于上述現(xiàn)有技術(shù)中的不足之處，本發(fā)明的目的在于為用戶提供一種前端頁面加載的方法及系統(tǒng)，以解決現(xiàn)有技術(shù)中前端頁面加載響應(yīng)較慢的問題。
[0005]本發(fā)明解決技術(shù)問題所采用的技術(shù)方案如下:
一種前端頁面加載的方法，其中，包括:
A、預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序；
B、接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件；
C、所述加載組件根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成。
[0006]所述前端頁面加載的方法，其中，所述步驟C中還包括:
Cl、所述加載組件在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，若獲取失敗，則根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
[0007]所述前端頁面加載的方法，其中，所述步驟C還包括:
C2、對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
[0008]所述前端頁面加載的方法，其中，所述步驟A中設(shè)置加載的優(yōu)先級順序為頁面展示的先后順序。
[0009]所述前端頁面加載的方法，其中，所述步驟A中設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
[0010]一種前端頁面加載的系統(tǒng)，其中，包括以下模塊:
加載設(shè)置模塊，用于預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序；
加載開啟模塊，用于接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件；
加載處理模塊，用于根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成。
[0011]所述前端頁面加載的系統(tǒng)，其中，所述加載處理模塊還包括:資源獲取單元；
所述資源獲取單元，用于在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，
若獲取失敗，則根據(jù)預(yù)設(shè)設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
[0012]所述前端頁面加載的系統(tǒng)，其中，所述加載處理模塊還包括:定時單元；
所述定時單元，用于對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
[0013]所述前端頁面加載的系統(tǒng)，其中，所述加載設(shè)置模塊中設(shè)置加載的優(yōu)先級順序為頁面展示的先后順序。
[0014]所述前端頁面加載的系統(tǒng)，其中，所述加載設(shè)置模塊中設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
[0015]有益效果，本發(fā)明所提供的一種前端頁面加載的方法及系統(tǒng)，通過首先將頁面資源進行分類，對分類出的頁面資源設(shè)置加載的優(yōu)先級順序，在加載前一類別的頁面資源時，預(yù)先在后臺獲取后一類別的頁面資源，使在前一類別的頁面資源加載完成后，后一類別的頁面資源在后臺已經(jīng)加載完成或者已經(jīng)加載了一部分，從而減少了在前端頁面進行加載時響應(yīng)的時間，并且加載的優(yōu)先級順序可以根據(jù)用戶的需求進行設(shè)置，因此本發(fā)明所述方法及系統(tǒng)為用戶在訪問頁面時候提供方便。

【專利附圖】

【附圖說明】
[0016]圖1是本發(fā)明前端頁面加載的方法步驟流程圖。
[0017]圖2是本發(fā)明前端頁面加載的系統(tǒng)原理結(jié)構(gòu)示意圖。

【具體實施方式】
[0018]為使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚、明確，以下參照附圖并舉實施例對本發(fā)明進一步詳細說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用于解釋本發(fā)明，并不用于限定本發(fā)明。
[0019]本發(fā)明提供了一種前端頁面加載的方法，如圖1所示，所述方法包括以下步驟:
S1、預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序。
[0020]具體的，在本步驟中通過對加載組件進行設(shè)置來實現(xiàn)頁面資源加載的優(yōu)先級順序。
[0021]優(yōu)選的,所述加載組件是使用javascript語言編寫而成的，當(dāng)然也可以使用其他程序語言來實現(xiàn)。
[0022]在進行頁面資源加載的優(yōu)先級順序時，可以有以下兩種不同的設(shè)置方法:
第一種，在進行前端頁面資源加載時，可以設(shè)置成根據(jù)頁面展示的先后順序來設(shè)置加載的優(yōu)先級順序。
[0023]當(dāng)將加載組件設(shè)置成上述加載方法時，則前端頁面根據(jù)主流屏幕分辨率來對頁面進行分屏，在每一屏開始的位置預(yù)埋錨點，當(dāng)用戶滾屏?xí)r可以感知到用戶的動作。具體加載時，則優(yōu)先加載樣式文件渲染頁面展示效果；其次加載第一屏必須的圖片、腳本文件。從而達到用戶在頁面中首先是看到頁面效果，其次是交互，所以，頁面效果渲染展示是放在第一位的。
[0024]第二種，在進行前端頁面資源加載時，設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
[0025]當(dāng)用戶點擊前端頁面中的某個應(yīng)用程序的功能進行使用時，與該功能相關(guān)的后繼功能、資源文件是確定的，可以在加載組件中進行設(shè)置，只加載后繼相關(guān)功能的資源文件，也即是可以根據(jù)與該應(yīng)用程序相關(guān)的鏈接順序來進行頁面資源加載的優(yōu)先級順序的加載。
[0026]S2、接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件。
[0027]接收到用戶發(fā)出的加載頁面的指令后，首先加載頁面的整體分塊框架，并運行加載組件，所述加載組件根據(jù)上述步驟SI中預(yù)先設(shè)置出的加載優(yōu)先級順序進行頁面加載。
[0028]S3、所述加載組件根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成。
[0029]加載組件根據(jù)預(yù)先設(shè)置的優(yōu)先級順序加載頁面資源，并在加載前一類別頁面資源的同時，在后臺獲取與后一分類的頁面資源相關(guān)的資源文件，進行后一分類的頁面資源的預(yù)加載。
[0030]由于進行后一分類的頁面資源加載時，有可能當(dāng)用戶瀏覽前一類頁面資源時，后一類頁面資源已經(jīng)在后臺加載完成，當(dāng)用戶可以直接瀏覽到后一類頁面資源，也有可能用戶在進行后一類頁面資源瀏覽時，后一類頁面資源在后臺還沒有加載完成，但是在后臺預(yù)加載的方式比當(dāng)用戶瀏覽到后一類頁面資源時在進行后一類頁面資源的加載縮短了加載的時間，減少了用戶的瀏覽等待時間。
[0031]所述前端頁面加載的方法，其中，所述步驟S3中還包括:
531、所述加載組件在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，若獲取失敗，則根據(jù)預(yù)設(shè)設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
[0032]所述前端頁面加載的方法，其中，所述步驟S3還包括:
532、對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
[0033]為了對本發(fā)明所述方法進行更加詳細的說明，下面舉例說明:
假設(shè)前端頁面根據(jù)主流屏幕分辨率可以分為5屏內(nèi)容:第I屏共200K，第2屏共160K，第3屏共250K，第4屏共120K，第5屏共220K。同時，假設(shè)用戶網(wǎng)速50K/秒，那么一次性加載完成的時間為19秒。
[0034]由于在用戶在等待頁面響應(yīng)時，若在2秒之內(nèi)給客戶響應(yīng)被用戶認為是“非常有吸引力”的用戶體驗；在5秒之內(nèi)響應(yīng)客戶被認為“比較不錯”;在10秒內(nèi)給用戶響應(yīng)被認為“糟糕”;如果超過10秒還沒有得到響應(yīng)，那么大多用戶會認為這次請求是失敗的，因此如果按照傳統(tǒng)的方式對上述前端頁面進行加載，用戶將認為對該網(wǎng)頁的請求是失敗的。
[0035]下面說明使用本發(fā)明所述方法進行前端頁面的實施例。
[0036]1、用戶訪問產(chǎn)品網(wǎng)站，發(fā)出加載前端頁面的指令。
[0037]2、接收到用戶發(fā)出的加載前端頁面的指令后，用戶瀏覽器先加載前端頁面A整體分塊框架以及智能加載程序(30K)。
[0038]3、加載組件根據(jù)動態(tài)配置加載技術(shù)加載“第I屏(200K)”，響應(yīng)時間4秒；“第I屏”加載完成后，用戶端顯示效果正常。【比較不錯】
4、用戶在“第I屏”中使用產(chǎn)品時，加載組件根據(jù)加載的優(yōu)先級順序從服務(wù)器智能預(yù)加載“第2屏”指定資源文件。
[0039]獲取資源文件過程中，出現(xiàn)獲取某個資源文件超時的情況，智能判斷程序自動根據(jù)配置策略，獲取下一個資源文件，以保證在用戶使用下一屏前加載盡量多的資源文件，減少用戶使用下一屏?xí)r的等待時間。
[0040]5、用戶使用完第I屏后，瀏覽到第2屏?xí)r，正常情況下“第2屏(160K)”的資源文件都已經(jīng)加載到用戶端，用戶瀏覽到“第2屏”無需等待?！痉浅Ｓ形Α?br> 用戶瀏覽完“第I屏”后，瀏覽到“第2屏”，最壞的情況下，響應(yīng)時間為3.2秒?！颈容^不錯】
6、同理，用戶瀏覽完“第2屏”后，瀏覽到“第3屏”，正常情況下無需等待?！痉浅Ｓ形Α?br> 同理，用戶瀏覽完“第2屏”后，瀏覽到“第3屏”，最壞的情況下，響應(yīng)時間為5秒。【比較不錯】
7、以此類推，加載完成全部的頁面資源。
[0041]從上述實施例可以看出，所述方法在不降低用戶產(chǎn)品使用效果的前提下，大大提高了對前端頁面響應(yīng)的速度。
[0042]在本發(fā)明所述方法的基礎(chǔ)上，本發(fā)明還提供了一種前端頁面加載的系統(tǒng)，如圖2所示，所述系統(tǒng)包括以下模塊:
加載設(shè)置模塊10，用于預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序；其功能如上述步驟Si所述。
[0043]加載開啟模塊20，用于接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件；其功能如上述步驟S2所述。
[0044]加載處理模塊30，用于根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成，其功能如上述步驟S3所述。
[0045]所述加載處理模塊還包括:資源獲取單元；
所述資源獲取單元，用于在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，若獲取失敗，則根據(jù)預(yù)設(shè)設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
[0046]所述加載處理模塊還包括:定時單元；
所述定時單元，用于對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
[0047]所述加載設(shè)置模塊中設(shè)置加載的優(yōu)先級順序為頁面展示的先后順序，還可以設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
[0048]有益效果，本發(fā)明所提供的一種前端頁面加載的方法及系統(tǒng)，通過首先將頁面資源進行分類，對分類出的頁面資源設(shè)置加載的優(yōu)先級順序，在加載前一類別的頁面資源時，預(yù)先在后臺獲取后一類別的頁面資源，使在前一類別的頁面資源加載完成后，后一類別的頁面資源在后臺已經(jīng)加載完成或者已經(jīng)加載了一部分，從而減少了在前端頁面進行加載時響應(yīng)的時間，并且加載的優(yōu)先級順序可以根據(jù)用戶的需求進行設(shè)置，因此本發(fā)明所述方法及系統(tǒng)為用戶在訪問頁面時候提供方便。
[0049] 可以理解的是，對本領(lǐng)域普通技術(shù)人員來說，可以根據(jù)本發(fā)明的技術(shù)方案及其發(fā)明構(gòu)思加以等同替換或改變，而所有這些改變或替換都應(yīng)屬于本發(fā)明所附的權(quán)利要求的保護范圍。
【權(quán)利要求】
1.一種前端頁面加載的方法，其特征在于，包括: A、預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序； B、接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件； C、所述加載組件根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成。
2.根據(jù)權(quán)利要求1所述前端頁面加載的方法，其特征在于，所述步驟C中還包括: Cl、所述加載組件在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，若獲取失敗，則根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
3.根據(jù)權(quán)利要求2所述前端頁面加載的方法，其特征在于，所述步驟C還包括: C2、對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
4.根據(jù)權(quán)利要求2所述前端頁面加載的方法，其特征在于，所述步驟A中設(shè)置加載的優(yōu)先級順序為頁面展示的先后順序。
5.根據(jù)權(quán)利要求2所述前端頁面加載的方法，其特征在于，所述步驟A中設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
6.—種前端頁面加載的系統(tǒng),其特征在于,包括以下模塊: 加載設(shè)置模塊，用于預(yù)先對前端頁面資源進行分類，并設(shè)置不同類別頁面資源加載的優(yōu)先級順序； 加載開啟模塊，用于接收用戶請求加載前端頁面的指令，加載頁面整體分塊框架及運行加載組件； 加載處理模塊，用于根據(jù)預(yù)先設(shè)置的加載的優(yōu)先級順序依次加載頁面資源，并在加載前一類別頁面資源的同時，預(yù)加載后一分類的頁面資源，直到整個頁面的頁面資源加載完成。
7.根據(jù)權(quán)利要求6所述前端頁面加載的系統(tǒng)，其特征在于，所述加載處理模塊還包括:資源獲取單元； 所述資源獲取單元，用于在加載前一類別的頁面資源同時，獲取后一類別的頁面資源，若獲取失敗，則根據(jù)預(yù)設(shè)設(shè)置的加載的優(yōu)先級順序，獲取下一個類別的頁面資源。
8.根據(jù)權(quán)利要求6所述前端頁面加載的系統(tǒng)，其特征在于，所述加載處理模塊還包括:定時單元； 所述定時單元，用于對獲取后一類別的頁面資源的時間進行定時，當(dāng)時間超時，則判定獲取失敗。
9.根據(jù)權(quán)利要求7所述前端頁面加載的系統(tǒng)，其特征在于，所述加載設(shè)置模塊中設(shè)置加載的優(yōu)先級順序為頁面展示的先后順序。
10.根據(jù)權(quán)利要求7所述前端頁面加載的系統(tǒng)，其特征在于，所述加載設(shè)置模塊中設(shè)置加載的優(yōu)先級順序為用戶瀏覽頁面時的使用到的應(yīng)用程序的鏈接順序。
【文檔編號】G06F9/445GK104166569SQ201410402103
【公開日】2014年11月26日 申請日期:2014年8月15日 優(yōu)先權(quán)日:2014年8月15日
【發(fā)明者】陳熾昌, 汪凌, 胡磊, 袁永強, 邱友雄 申請人:北京彩云動力教育科技有限公司