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

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

CDN  + 瀏覽器緩存

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

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

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

2.304 cache

簡單來說就是轉(zhuǎn)掉請求，緩存不重加載。

缺點(diǎn)：

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

2.無法增量更新

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

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

manifest文件包含：

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

2.cache的文件

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

4.失敗響應(yīng)

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

1.真有版本更新才會(huì)有請求（CDN方式還是會(huì)有請求的，只不過是304請求）

缺點(diǎn)：

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

  PS:所以必須監(jiān)聽一個(gè)事件，重刷頁面

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

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

  PS：灰度發(fā)布：簡單來說就是一部分人使用舊版，一部分人使用新版。

3.無法增量更新

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

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

本地存儲(chǔ)

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

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

1.減少不必要的請求

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

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

PS：1.chunk算法，四個(gè)字符為一個(gè)塊，比對塊。

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

缺點(diǎn)：

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

2.某些瀏覽器不支持