abstract：互聯(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)化方式。其實就是將自己頁面所依賴的js（靜態(tài)的）放置到CDN上，或者使用一些CDN庫，以此降低對應(yīng)用服務(wù)器的請求，而瀏覽器緩存也是不重復(fù)加載js文件的性質(zhì)。優(yōu)點：1.簡單、容易維護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)化方式。其實就是將自己頁面所依賴的js（靜態(tài)的）放置到CDN上，或者使用一些CDN庫，以此降低對應(yīng)用服務(wù)器的請求，而瀏覽器緩存也是不重復(fù)加載js文件的性質(zhì)。

優(yōu)點：

1.簡單、容易維護

2.304 cache

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

缺點：

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

2.無法增量更新

離線存儲（HTML5 AppCache）

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

manifest文件包含：

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

2.cache的文件

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

4.失敗響應(yīng)

優(yōu)點：

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

缺點：

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

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

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.進入離線存儲的頁面，如果不更新版本，是會將其當(dāng)初靜態(tài)頁面不請求，這樣就無法進行灰度發(fā)布等策略。

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

3.無法增量更新

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

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

本地存儲

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

優(yōu)點：

1.減少不必要的請求

2.避免離線存儲的問題

3.增量更新（需要算法計算）

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

       2.編輯距離計算算法

缺點：

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

2.某些瀏覽器不支持