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

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

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


【發(fā)明內容】

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

【專利附圖】

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

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