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.某些瀏覽器不支持