亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

js資源加載優(yōu)化

asal 2016-11-11 13:45:32 314
abstrak:互聯(lián)網(wǎng)應(yīng)用或者訪問(wèn)量大的應(yīng)用,對(duì)js的加載優(yōu)化是不可少的。下面記錄幾種優(yōu)化方法CDN  + 瀏覽器緩存CDN(content delivery network)內(nèi)容分發(fā)網(wǎng)絡(luò), 最傳統(tǒng)的優(yōu)化方式。其實(shí)就是將自己頁(yè)面所依賴的js(靜態(tài)的)放置到CDN上,或者使用一些CDN庫(kù),以此降低對(duì)應(yīng)用服務(wù)器的請(qǐng)求,而瀏覽器緩存也是不重復(fù)加載js文件的性質(zhì)。優(yōu)點(diǎn):1.簡(jiǎn)單、容易維護(hù)2.304 cache簡(jiǎn)

互聯(lián)網(wǎng)應(yīng)用或者訪問(wèn)量大的應(yīng)用,對(duì)js的加載優(yōu)化是不可少的。下面記錄幾種優(yōu)化方法

CDN  + 瀏覽器緩存

CDN(content delivery network)內(nèi)容分發(fā)網(wǎng)絡(luò), 最傳統(tǒng)的優(yōu)化方式。其實(shí)就是將自己頁(yè)面所依賴的js(靜態(tài)的)放置到CDN上,或者使用一些CDN庫(kù),以此降低對(duì)應(yīng)用服務(wù)器的請(qǐng)求,而瀏覽器緩存也是不重復(fù)加載js文件的性質(zhì)。

優(yōu)點(diǎn):

1.簡(jiǎn)單、容易維護(hù)

2.304 cache

簡(jiǎn)單來(lái)說(shuō)就是轉(zhuǎn)掉請(qǐng)求,緩存不重加載。

缺點(diǎn):

1.緩存會(huì)失效,當(dāng)用戶強(qiáng)制刷新時(shí)會(huì)有請(qǐng)求

2.無(wú)法增量更新

離線存儲(chǔ)(HTML5 AppCache)

通過(guò)配置一個(gè)manifest文件實(shí)現(xiàn)離線緩存

manifest文件包含:

1.當(dāng)前版本號(hào)

2.cache的文件

3.需要網(wǎng)絡(luò)請(qǐng)求的文件

4.失敗響應(yīng)

優(yōu)點(diǎn):

1.真有版本更新才會(huì)有請(qǐng)求(CDN方式還是會(huì)有請(qǐng)求的,只不過(guò)是304請(qǐng)求)

缺點(diǎn):

1.更新完版本后,必須刷新一次頁(yè)面才會(huì)啟用新版本文件。

  PS:所以必須監(jiān)聽(tīng)一個(gè)事件,重刷頁(yè)面

window.applicationCache.addEventListener('updateready', function (e) {
        console.warn('頁(yè)面更新中');
        window.applicationCache.update();
        window.applicationCache.swapCache();
        setTimeout(function () {
            location.reload();
        }, 10);
}, false); //from  http://dd.m.taobao.com/

2.進(jìn)入離線存儲(chǔ)的頁(yè)面,如果不更新版本,是會(huì)將其當(dāng)初靜態(tài)頁(yè)面不請(qǐng)求,這樣就無(wú)法進(jìn)行灰度發(fā)布等策略。

  PS:灰度發(fā)布:簡(jiǎn)單來(lái)說(shuō)就是一部分人使用舊版,一部分人使用新版。

3.無(wú)法增量更新

  PS:例如一個(gè)100KB的文件,你只修改了其中4KB的東西,但你不得不更新整個(gè)100KB文件。

4.當(dāng)需要更新某個(gè)文件時(shí),會(huì)連帶其他文件也跟著更新

本地存儲(chǔ)

應(yīng)用頁(yè)面通過(guò)對(duì)用戶當(dāng)前版本與服務(wù)端版本的比較(本地存儲(chǔ)有版本信息),通過(guò)跨域ajax請(qǐng)求有更新的js文件,如果是增量更新,則通過(guò)算法計(jì)算出新版本的js代碼,然后將代碼eval一下并將新js字符串存儲(chǔ)到本地存儲(chǔ)中(localStorage),以供下次增量更新。

優(yōu)點(diǎn):

1.減少不必要的請(qǐng)求

2.避免離線存儲(chǔ)的問(wèn)題

3.增量更新(需要算法計(jì)算)

PS:1.chunk算法,四個(gè)字符為一個(gè)塊,比對(duì)塊。

       2.編輯距離計(jì)算算法

缺點(diǎn):

1.實(shí)現(xiàn)起來(lái)比前面幾種方法復(fù)雜

2.某些瀏覽器不支持


Nota Keluaran

Penyertaan Popular