一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法
【專利摘要】一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，涉及web開發(fā)【技術(shù)領(lǐng)域】，其包括以下步驟：步驟S1.依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分；步驟S2.重構(gòu)網(wǎng)站頁面代碼，只加入對最高優(yōu)先級前端代碼的引用；步驟S3.網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載剩余的前端代碼。本發(fā)明能夠盡快的讓用戶看到頁面，尤其在網(wǎng)速慢、代碼量大時，能夠避免用戶長時間等待，提高了用戶體驗。
【專利說明】一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及冊13開發(fā)【技術(shù)領(lǐng)域】，具體來講是一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法。
【背景技術(shù)】
[0002]隨著冊1^0時代的到來和中國互聯(lián)網(wǎng)用戶的井噴式增長，各種網(wǎng)站如雨后春筍般在互聯(lián)網(wǎng)中生根發(fā)芽，網(wǎng)站在很多方面的便利也讓用戶對網(wǎng)站也越來越依賴。很多網(wǎng)站在用戶量逐漸擴(kuò)大的過程中，網(wǎng)站功能也逐漸增多。網(wǎng)站功能豐富直接導(dǎo)致網(wǎng)站頁面代碼的復(fù)雜，這體現(xiàn)在網(wǎng)站頁面需要加載的了8^716 311661:8，式層疊表或簡稱樣式表)代碼越來越多，越來越大，從而導(dǎo)致頁面等待時間也越來越長，而長久地等待會讓用戶對網(wǎng)站的體驗直線下降。
[0003]? ！—樣式表一?
[0004]〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7161- 088^/^
[0005]〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7162.088^/^
[0006]〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7163.088^/^
[0007]...
[0008]? ！ —^^8801-11)1:腳本文件一?
[0009]1:7？6 ==
[0010]1:7？6 = = 801-1^1:)
[0011]^801-11)1: 1:7？6 =^^8801-11)1:^81-0 = ^^^8801-11)1:3.801-1^1:)
[0012]上面所示為傳統(tǒng)網(wǎng)站頁面前端代碼放置模型，這種模型下，由于所有前端代碼文件順序排列，會讓瀏覽器一直處于加載狀態(tài)直到所有的前端代碼文件加載完畢，當(dāng)瀏覽器加載頁面的時候，這些代碼就會阻塞瀏覽器渲染網(wǎng)站頁面，尤其在網(wǎng)速慢、代碼量大時，這些前端代碼的加載會非常耗時，用戶則需要一直等待，造成用戶體驗差。
【發(fā)明內(nèi)容】
[0013]針對現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的目的在于提供一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，本發(fā)明能夠盡快的讓用戶看到頁面，尤其在網(wǎng)速慢、代碼量大時，能夠避免用戶長時間等待，提聞了用戶體驗。
[0014]為達(dá)到以上目的，本發(fā)明采取的技術(shù)方案是:一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，包括以下步驟:步驟31.依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分；步驟82.重構(gòu)網(wǎng)站頁面代碼，只加入對最高優(yōu)先級前端代碼的引用；步驟33.網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載剩余的前端代碼。
[0015]在上述技術(shù)方案的基礎(chǔ)上，所述前端代碼包括拓^3(^1討和033。
[0016]在上述技術(shù)方案的基礎(chǔ)上，步驟51中，依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分，依次劃分為第一優(yōu)先級前端代碼、第二優(yōu)先級前端代碼、第三優(yōu)先級前端代碼；其中，第一優(yōu)先級前端代碼表示網(wǎng)站頁面一旦顯示出來就能夠和用戶交互所用到的代碼；第二優(yōu)先級前端代碼表示網(wǎng)站頁面和用戶交互的過程中需要進(jìn)一步交互所用到的代碼；第三優(yōu)先級前端代碼表示其它網(wǎng)站頁面用到的不同于當(dāng)前網(wǎng)站頁面的代碼。
[0017]在上述技術(shù)方案的基礎(chǔ)上，步驟33中，當(dāng)前網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載第二優(yōu)先級前端代碼；當(dāng)前網(wǎng)站頁面需要的代碼加載完畢后，加載第三優(yōu)先級前端代碼。
[0018]在上述技術(shù)方案的基礎(chǔ)上，步驟32中，利用壓縮工具壓縮前端代碼，縮減加載時間。
[0019]在上述技術(shù)方案的基礎(chǔ)上，所述壓縮工具為
[0020]在上述技術(shù)方案的基礎(chǔ)上，步驟32中，若最高優(yōu)先級前端代碼有兩個以上的文件，則將所述兩個以上的文件合并為一個單獨的文件，以降低請求數(shù)。
[0021]在上述技術(shù)方案的基礎(chǔ)上，步驟33中，網(wǎng)站頁面觸發(fā)01^021(1事件時網(wǎng)站頁面完全載入完畢。
[0022]本發(fā)明的有益效果在于:
[0023]1、由于本發(fā)明加載頁面時，只加載最高優(yōu)先級前端代碼文件，等網(wǎng)站頁面觸發(fā)加載完畢事件時，再按照優(yōu)先級順序動態(tài)加載剩余的前端代碼文件，因此能夠盡快的讓用戶看到頁面，尤其在網(wǎng)速慢、代碼量大時，能夠避免用戶長時間等待，提高了用戶體驗。
[0024]2、由于本發(fā)明中，用戶開始瀏覽網(wǎng)站頁面的時候，后臺動態(tài)加載剩余的前端代碼文件，等用戶操作需要這部分代碼的時候，代碼已經(jīng)加載完畢或者只需要讓用戶等待很短的時間即可加載完畢，進(jìn)一步的提高了用戶體驗。
【專利附圖】
【附圖說明】
[0025]圖1為本發(fā)明實施例中網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法流程圖。
【具體實施方式】
[0026]在本發(fā)明中涉及的相關(guān)技術(shù)術(shù)語，作如下說明:
[0027]的，是一種瀏覽器內(nèi)置的腳本語言，用于對頁面元素編程產(chǎn)生各種效果。
[0028]2.(:33,用于更改頁面元素外觀(顏色，大小，邊框等等)。
[0029]3.前端代碼，泛指]033文件。
[0030]4.網(wǎng)站頁面，由網(wǎng)站服務(wù)器返回的一段文本，包含!代碼以及對了討文件和(:％文件的引用。
[0031]5.頁面元素，一段代碼的表現(xiàn)形式，如一段文字，一張圖片，一個超鏈接等。
[0032]以下結(jié)合附圖及實施例對本發(fā)明作進(jìn)一步詳細(xì)說明。
[0033]參見圖1所示，一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，包括以下步驟:
[0034]步驟51.依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分；所述前端代碼包括
和“3。優(yōu)選的，依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分，依次劃分為第一優(yōu)先級前端代碼、第二優(yōu)先級前端代碼、第三優(yōu)先級前端代碼；其中，第一優(yōu)先級前端代碼表示網(wǎng)站頁面一旦顯示出來就能夠和用戶交互所用到的代碼；第二優(yōu)先級前端代碼表示網(wǎng)站頁面和用戶交互的過程中需要進(jìn)一步交互所用到的代碼；第三優(yōu)先級前端代碼表示其它網(wǎng)站頁面用到的不同于當(dāng)前網(wǎng)站頁面的代碼。
[0035]步驟32.重構(gòu)網(wǎng)站頁面代碼，只加入對最高優(yōu)先級前端代碼的引用；優(yōu)選的，若最高優(yōu)先級前端代碼有兩個以上的文件，則將所述兩個以上的文件合并為一個單獨的文件，以降低請求數(shù)。利用壓縮工具壓縮前端代碼，縮減加載時間，優(yōu)選的，所述壓縮工具為
7111-001111)^6550^0
[0036]步驟33.網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載剩余的前端代碼。具體的，網(wǎng)站頁面觸發(fā)0111X^(1事件時網(wǎng)站頁面完全載入完畢。優(yōu)選的，當(dāng)前網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載第二優(yōu)先級前端代碼；當(dāng)前網(wǎng)站頁面需要的代碼加載完畢后，加載第三優(yōu)先級前端代碼。
[0037]為方便理解，下面結(jié)合具體的實例對本發(fā)明作進(jìn)一步說明:
[0038]? ！—合并，壓縮必需樣式后的樣式表文件一?
[0039]〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7161- 088^/^
[0040]...
[0041]? ！—可以動態(tài)加載其它腳本的』腳本文件一?
[0042]1:7？6 ==
[0043]上面所示為本發(fā)明改進(jìn)后的網(wǎng)站頁面前端代碼放置模型，這種模型下，只加載最高優(yōu)先級的樣式表文件和拓^3(^1的文件，等網(wǎng)站頁面觸發(fā)加載完畢事件時，再按照優(yōu)先級順序動態(tài)加載剩余的前端代碼文件。以登陸頁面為例，登陸頁面和第一優(yōu)先級前端代碼加載完畢之后，用戶需要輸入用戶名和密碼，在用戶登陸成功之前，可以利用這些時間去加載剩余的第二優(yōu)先級前端代碼和第三優(yōu)先級前端代碼，這樣等用戶成功登陸后，前端頁面會迅速的顯示出來，避免的因等待造成的用戶體驗差。
[0044]本發(fā)明不局限于上述實施方式，對于本【技術(shù)領(lǐng)域】的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以做出若干改進(jìn)和潤飾，這些改進(jìn)和潤飾也視為本發(fā)明的保護(hù)范圍之內(nèi)。本說明書中未作詳細(xì)描述的內(nèi)容屬于本領(lǐng)域?qū)I(yè)技術(shù)人員公知的現(xiàn)有技術(shù)。
【權(quán)利要求】
1.一種網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于，包括以下步驟: 步驟S1.依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分； 步驟S2.重構(gòu)網(wǎng)站頁面代碼，只加入對最高優(yōu)先級前端代碼的引用； 步驟S3.網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載剩余的前端代碼。
2.如權(quán)利要求1所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:所述前端代碼包括JavaScript和CSS。
3.如權(quán)利要求1所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于，步驟SI中，依據(jù)代碼的重要級別對前端代碼進(jìn)行優(yōu)先級劃分，依次劃分為第一優(yōu)先級前端代碼、第二優(yōu)先級前端代碼、第三優(yōu)先級前端代碼； 其中，第一優(yōu)先級前端代碼表示網(wǎng)站頁面一旦顯示出來就能夠和用戶交互所用到的代碼； 第二優(yōu)先級前端代碼表示網(wǎng)站頁面和用戶交互的過程中需要進(jìn)一步交互所用到的代碼； 第三優(yōu)先級前端代碼表示其它網(wǎng)站頁面用到的不同于當(dāng)前網(wǎng)站頁面的代碼。
4.如權(quán)利要求3所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:步驟S3中，當(dāng)前網(wǎng)站頁面完全載入完畢后，按照優(yōu)先級順序動態(tài)加載第二優(yōu)先級前端代碼；當(dāng)前網(wǎng)站頁面需要的代碼加載完畢后，加載第三優(yōu)先級前端代碼。
5.如權(quán)利要求1所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:步驟S2中，利用壓縮工具壓縮前端代碼，縮減加載時間。
6.如權(quán)利要求5所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:所述壓縮工具為 yu1-compressor0
7.如權(quán)利要求1所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:步驟S2中，若最高優(yōu)先級前端代碼有兩個以上的文件，則將所述兩個以上的文件合并為一個單獨的文件，以降低請求數(shù)。
8.如權(quán)利要求1所述的網(wǎng)站頁面瀏覽器端極速渲染的實現(xiàn)方法，其特征在于:步驟S3中，網(wǎng)站頁面觸發(fā)onLoad事件時網(wǎng)站頁面完全載入完畢。
【文檔編號】G06F9/44GK104461543SQ201410763593
【公開日】2015年3月25日 申請日期:2014年12月11日 優(yōu)先權(quán)日:2014年12月11日
【發(fā)明者】張垚 申請人:武漢噢易云計算有限公司