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

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

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


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

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

【專利附圖】

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

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