1、 減少http請求，合理設(shè)置 HTTP緩存

http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，意味著每次http請求都需要建立通信鏈路、進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個http都需要啟動獨立的線程去處理。這些通信和服務(wù)的開銷都很昂貴，減少http請求的數(shù)目可有效提高訪問性能。

減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應(yīng)鼠標(biāo)點擊操作，構(gòu)造不同的URL。

① 簡單的圖片效果可以使用html+css、canvas或者svg來替換。

② 合并CSS、合并javascript、合并圖片（webPack等包管理工具）

③ 圖片格式，大小選擇，圖片優(yōu)化

2、 應(yīng)用瀏覽器緩存：

① http緩存（文件級緩存）

② cookie: 儲存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過加密)有長度和個數(shù)限制，瀏覽器端也可以通過document.cookie來獲取cookie，并通過js瀏覽器端也可以方便地讀取/設(shè)置cookie的值。

③ localStorage: localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數(shù)據(jù)，加快下次頁面打開時的渲染速度。localstorage大小有限制，不適合存放過多的數(shù)據(jù)，如果數(shù)據(jù)存放超過最大限制會報錯，并移除最先保存的數(shù)據(jù)。localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數(shù)據(jù)

localStorage核心API:

localStorage.setItem(key, value) //設(shè)置記錄

localStorage.getItem(key) //獲取記錄

localStorage.removeItem(key) //刪除該域名下單條記錄

localStorage.clear() //刪除該域名下所有記錄

注：localStorage對象的屬性值只能是字符串，json對象可以根據(jù)當(dāng)然也可以借助JSON類，將對象轉(zhuǎn)換成字符串保存，然后在取出來的時候?qū)son字符串轉(zhuǎn)換成真正可用的json對象格式。

④ sessionstorage：

sessionStorage和localstorage類似，但是瀏覽器關(guān)閉則會全部刪除，api和localstorage相同，實際項目中使用較少。

⑤ application cache

application cahce是將大部分圖片資源、js、css等靜態(tài)資源放在manifest文件配置中。當(dāng)頁面打開時通過manifest文件來讀取本地文件或是請求服務(wù)器文件。

3、啟用壓縮

在服務(wù)器端對文件進(jìn)行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個合為一個。文本文件的壓縮效率可達(dá)到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達(dá)到較好的效果。但是壓縮對服務(wù)器和瀏覽器產(chǎn)生一定的壓力，在通信帶寬良好，而服務(wù)器資源不足的情況下要權(quán)衡考慮。

采用網(wǎng)上在線壓縮工具（jQuery MiniUI）自己壓縮或者通過webpack、gulp等打包工具進(jìn)行壓縮處理。

4、(使用精靈圖)CSS Sprites

5、(圖片懶加載)LazyLoad Images

對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。

①jqueryLazyload方式

②echo.js方式

6、CSS放在頁面最上部，javascript放在頁面最下面

如有幫助到您,我將倍感榮幸