一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法
【專利摘要】一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，涉及web開(kāi)發(fā)【技術(shù)領(lǐng)域】，其包括以下步驟：步驟S1.依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分；步驟S2.重構(gòu)網(wǎng)站頁(yè)面代碼，只加入對(duì)最高優(yōu)先級(jí)前端代碼的引用；步驟S3.網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼。本發(fā)明能夠盡快的讓用戶看到頁(yè)面，尤其在網(wǎng)速慢、代碼量大時(shí)，能夠避免用戶長(zhǎng)時(shí)間等待，提高了用戶體驗(yàn)。
【專利說(shuō)明】一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及冊(cè)13開(kāi)發(fā)【技術(shù)領(lǐng)域】，具體來(lái)講是一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法。

【背景技術(shù)】
[0002]隨著冊(cè)1^0時(shí)代的到來(lái)和中國(guó)互聯(lián)網(wǎng)用戶的井噴式增長(zhǎng)，各種網(wǎng)站如雨后春筍般在互聯(lián)網(wǎng)中生根發(fā)芽，網(wǎng)站在很多方面的便利也讓用戶對(duì)網(wǎng)站也越來(lái)越依賴。很多網(wǎng)站在用戶量逐漸擴(kuò)大的過(guò)程中，網(wǎng)站功能也逐漸增多。網(wǎng)站功能豐富直接導(dǎo)致網(wǎng)站頁(yè)面代碼的復(fù)雜，這體現(xiàn)在網(wǎng)站頁(yè)面需要加載的了8^716 311661:8，式層疊表或簡(jiǎn)稱樣式表)代碼越來(lái)越多，越來(lái)越大，從而導(dǎo)致頁(yè)面等待時(shí)間也越來(lái)越長(zhǎng)，而長(zhǎng)久地等待會(huì)讓用戶對(duì)網(wǎng)站的體驗(yàn)直線下降。
[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)站頁(yè)面前端代碼放置模型，這種模型下，由于所有前端代碼文件順序排列，會(huì)讓瀏覽器一直處于加載狀態(tài)直到所有的前端代碼文件加載完畢，當(dāng)瀏覽器加載頁(yè)面的時(shí)候，這些代碼就會(huì)阻塞瀏覽器渲染網(wǎng)站頁(yè)面，尤其在網(wǎng)速慢、代碼量大時(shí)，這些前端代碼的加載會(huì)非常耗時(shí)，用戶則需要一直等待，造成用戶體驗(yàn)差。


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

[0013]針對(duì)現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的目的在于提供一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，本發(fā)明能夠盡快的讓用戶看到頁(yè)面，尤其在網(wǎng)速慢、代碼量大時(shí)，能夠避免用戶長(zhǎng)時(shí)間等待，提聞了用戶體驗(yàn)。
[0014]為達(dá)到以上目的，本發(fā)明采取的技術(shù)方案是:一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，包括以下步驟:步驟31.依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分；步驟82.重構(gòu)網(wǎng)站頁(yè)面代碼，只加入對(duì)最高優(yōu)先級(jí)前端代碼的引用；步驟33.網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼。
[0015]在上述技術(shù)方案的基礎(chǔ)上，所述前端代碼包括拓^3(^1討和033。
[0016]在上述技術(shù)方案的基礎(chǔ)上，步驟51中，依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分，依次劃分為第一優(yōu)先級(jí)前端代碼、第二優(yōu)先級(jí)前端代碼、第三優(yōu)先級(jí)前端代碼；其中，第一優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面一旦顯示出來(lái)就能夠和用戶交互所用到的代碼；第二優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面和用戶交互的過(guò)程中需要進(jìn)一步交互所用到的代碼；第三優(yōu)先級(jí)前端代碼表示其它網(wǎng)站頁(yè)面用到的不同于當(dāng)前網(wǎng)站頁(yè)面的代碼。
[0017]在上述技術(shù)方案的基礎(chǔ)上，步驟33中，當(dāng)前網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載第二優(yōu)先級(jí)前端代碼；當(dāng)前網(wǎng)站頁(yè)面需要的代碼加載完畢后，加載第三優(yōu)先級(jí)前端代碼。
[0018]在上述技術(shù)方案的基礎(chǔ)上，步驟32中，利用壓縮工具壓縮前端代碼，縮減加載時(shí)間。
[0019]在上述技術(shù)方案的基礎(chǔ)上，所述壓縮工具為
[0020]在上述技術(shù)方案的基礎(chǔ)上，步驟32中，若最高優(yōu)先級(jí)前端代碼有兩個(gè)以上的文件，則將所述兩個(gè)以上的文件合并為一個(gè)單獨(dú)的文件，以降低請(qǐng)求數(shù)。
[0021]在上述技術(shù)方案的基礎(chǔ)上，步驟33中，網(wǎng)站頁(yè)面觸發(fā)01^021(1事件時(shí)網(wǎng)站頁(yè)面完全載入完畢。
[0022]本發(fā)明的有益效果在于:
[0023]1、由于本發(fā)明加載頁(yè)面時(shí)，只加載最高優(yōu)先級(jí)前端代碼文件，等網(wǎng)站頁(yè)面觸發(fā)加載完畢事件時(shí)，再按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼文件，因此能夠盡快的讓用戶看到頁(yè)面，尤其在網(wǎng)速慢、代碼量大時(shí)，能夠避免用戶長(zhǎng)時(shí)間等待，提高了用戶體驗(yàn)。
[0024]2、由于本發(fā)明中，用戶開(kāi)始瀏覽網(wǎng)站頁(yè)面的時(shí)候，后臺(tái)動(dòng)態(tài)加載剩余的前端代碼文件，等用戶操作需要這部分代碼的時(shí)候，代碼已經(jīng)加載完畢或者只需要讓用戶等待很短的時(shí)間即可加載完畢，進(jìn)一步的提高了用戶體驗(yàn)。

【專利附圖】

【附圖說(shuō)明】
[0025]圖1為本發(fā)明實(shí)施例中網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法流程圖。

【具體實(shí)施方式】
[0026]在本發(fā)明中涉及的相關(guān)技術(shù)術(shù)語(yǔ)，作如下說(shuō)明:
[0027]的，是一種瀏覽器內(nèi)置的腳本語(yǔ)言，用于對(duì)頁(yè)面元素編程產(chǎn)生各種效果。
[0028]2.(:33,用于更改頁(yè)面元素外觀(顏色，大小，邊框等等)。
[0029]3.前端代碼，泛指]033文件。
[0030]4.網(wǎng)站頁(yè)面，由網(wǎng)站服務(wù)器返回的一段文本，包含!代碼以及對(duì)了討文件和(:％文件的引用。
[0031]5.頁(yè)面元素，一段代碼的表現(xiàn)形式，如一段文字，一張圖片，一個(gè)超鏈接等。
[0032]以下結(jié)合附圖及實(shí)施例對(duì)本發(fā)明作進(jìn)一步詳細(xì)說(shuō)明。
[0033]參見(jiàn)圖1所示，一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，包括以下步驟:
[0034]步驟51.依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分；所述前端代碼包括
和“3。優(yōu)選的，依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分，依次劃分為第一優(yōu)先級(jí)前端代碼、第二優(yōu)先級(jí)前端代碼、第三優(yōu)先級(jí)前端代碼；其中，第一優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面一旦顯示出來(lái)就能夠和用戶交互所用到的代碼；第二優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面和用戶交互的過(guò)程中需要進(jìn)一步交互所用到的代碼；第三優(yōu)先級(jí)前端代碼表示其它網(wǎng)站頁(yè)面用到的不同于當(dāng)前網(wǎng)站頁(yè)面的代碼。
[0035]步驟32.重構(gòu)網(wǎng)站頁(yè)面代碼，只加入對(duì)最高優(yōu)先級(jí)前端代碼的引用；優(yōu)選的，若最高優(yōu)先級(jí)前端代碼有兩個(gè)以上的文件，則將所述兩個(gè)以上的文件合并為一個(gè)單獨(dú)的文件，以降低請(qǐng)求數(shù)。利用壓縮工具壓縮前端代碼，縮減加載時(shí)間，優(yōu)選的，所述壓縮工具為
7111-001111)^6550^0
[0036]步驟33.網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼。具體的，網(wǎng)站頁(yè)面觸發(fā)0111X^(1事件時(shí)網(wǎng)站頁(yè)面完全載入完畢。優(yōu)選的，當(dāng)前網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載第二優(yōu)先級(jí)前端代碼；當(dāng)前網(wǎng)站頁(yè)面需要的代碼加載完畢后，加載第三優(yōu)先級(jí)前端代碼。
[0037]為方便理解，下面結(jié)合具體的實(shí)例對(duì)本發(fā)明作進(jìn)一步說(shuō)明:
[0038]? ！—合并，壓縮必需樣式后的樣式表文件一?
[0039]〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7161- 088^/^
[0040]...
[0041]? ！—可以動(dòng)態(tài)加載其它腳本的』腳本文件一?
[0042]1:7？6 ==
[0043]上面所示為本發(fā)明改進(jìn)后的網(wǎng)站頁(yè)面前端代碼放置模型，這種模型下，只加載最高優(yōu)先級(jí)的樣式表文件和拓^3(^1的文件，等網(wǎng)站頁(yè)面觸發(fā)加載完畢事件時(shí)，再按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼文件。以登陸頁(yè)面為例，登陸頁(yè)面和第一優(yōu)先級(jí)前端代碼加載完畢之后，用戶需要輸入用戶名和密碼，在用戶登陸成功之前，可以利用這些時(shí)間去加載剩余的第二優(yōu)先級(jí)前端代碼和第三優(yōu)先級(jí)前端代碼，這樣等用戶成功登陸后，前端頁(yè)面會(huì)迅速的顯示出來(lái)，避免的因等待造成的用戶體驗(yàn)差。
[0044]本發(fā)明不局限于上述實(shí)施方式，對(duì)于本【技術(shù)領(lǐng)域】的普通技術(shù)人員來(lái)說(shuō)，在不脫離本發(fā)明原理的前提下，還可以做出若干改進(jìn)和潤(rùn)飾，這些改進(jìn)和潤(rùn)飾也視為本發(fā)明的保護(hù)范圍之內(nèi)。本說(shuō)明書(shū)中未作詳細(xì)描述的內(nèi)容屬于本領(lǐng)域?qū)I(yè)技術(shù)人員公知的現(xiàn)有技術(shù)。
【權(quán)利要求】
1.一種網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于，包括以下步驟: 步驟S1.依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分； 步驟S2.重構(gòu)網(wǎng)站頁(yè)面代碼，只加入對(duì)最高優(yōu)先級(jí)前端代碼的引用； 步驟S3.網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載剩余的前端代碼。
2.如權(quán)利要求1所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:所述前端代碼包括JavaScript和CSS。
3.如權(quán)利要求1所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于，步驟SI中，依據(jù)代碼的重要級(jí)別對(duì)前端代碼進(jìn)行優(yōu)先級(jí)劃分，依次劃分為第一優(yōu)先級(jí)前端代碼、第二優(yōu)先級(jí)前端代碼、第三優(yōu)先級(jí)前端代碼； 其中，第一優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面一旦顯示出來(lái)就能夠和用戶交互所用到的代碼； 第二優(yōu)先級(jí)前端代碼表示網(wǎng)站頁(yè)面和用戶交互的過(guò)程中需要進(jìn)一步交互所用到的代碼； 第三優(yōu)先級(jí)前端代碼表示其它網(wǎng)站頁(yè)面用到的不同于當(dāng)前網(wǎng)站頁(yè)面的代碼。
4.如權(quán)利要求3所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:步驟S3中，當(dāng)前網(wǎng)站頁(yè)面完全載入完畢后，按照優(yōu)先級(jí)順序動(dòng)態(tài)加載第二優(yōu)先級(jí)前端代碼；當(dāng)前網(wǎng)站頁(yè)面需要的代碼加載完畢后，加載第三優(yōu)先級(jí)前端代碼。
5.如權(quán)利要求1所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:步驟S2中，利用壓縮工具壓縮前端代碼，縮減加載時(shí)間。
6.如權(quán)利要求5所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:所述壓縮工具為 yu1-compressor0
7.如權(quán)利要求1所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:步驟S2中，若最高優(yōu)先級(jí)前端代碼有兩個(gè)以上的文件，則將所述兩個(gè)以上的文件合并為一個(gè)單獨(dú)的文件，以降低請(qǐng)求數(shù)。
8.如權(quán)利要求1所述的網(wǎng)站頁(yè)面瀏覽器端極速渲染的實(shí)現(xiàn)方法，其特征在于:步驟S3中，網(wǎng)站頁(yè)面觸發(fā)onLoad事件時(shí)網(wǎng)站頁(yè)面完全載入完畢。
【文檔編號(hào)】G06F9/44GK104461543SQ201410763593
【公開(kāi)日】2015年3月25日 申請(qǐng)日期:2014年12月11日 優(yōu)先權(quán)日:2014年12月11日
【發(fā)明者】張垚 申請(qǐng)人:武漢噢易云計(jì)算有限公司