瀏覽器性能優化

一、 減小http請求，合理設置 HTTP緩存

http協議是無狀態的應用層協議，意味着每次http請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端，每一個http都須要啓動獨立的線程去處理。這些通訊和服務的開銷都很昂貴，減小http請求的數目可有效提升訪問性能。

減小http的主要手段是合併CSS、合併javascript、合併圖片。將瀏覽器一次訪問須要的javascript和CSS合併成一個文件，這樣瀏覽器就只須要一次請求。圖片也能夠合併，多張圖片合併成一張，若是每張圖片都有不一樣的超連接，可經過CSS偏移響應鼠標點擊操做，構造不一樣的URL。

① 簡單的圖片效果可使用html+css、canvas或者svg來替換。
② 合併CSS、合併javascript、合併圖片（webPack等包管理工具）
③ 圖片格式，大小選擇，圖片優化

二、 應用瀏覽器緩存：
① http緩存（文件級緩存）
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />
② cookie: 儲存在用戶本地終端上的數據(一般通過加密)有長度和個數限制，瀏覽器端也能夠經過document.cookie來獲取cookie，並經過js瀏覽器端也能夠方便地讀取/設置cookie的值。
③ localStorage: localStorage是html5的一種新的本地緩存方案，目前用的比較多，通常用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。localstorage大小有限制，不適合存放過多的數據，若是數據存放超過最大限制會報錯，並移除最早保存的數據。localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據
localStorage核心API:
localStorage.setItem(key, value) //設置記錄
localStorage.getItem(key) //獲取記錄
localStorage.removeItem(key) //刪除該域名下單條記錄
localStorage.clear() //刪除該域名下全部記錄

注：localStorage對象的屬性值只能是字符串，json對象能夠根據固然也能夠藉助JSON類，將對象轉換成字符串保存，而後在取出來的時候將json字符串轉換成真正可用的json對象格式。
④ sessionstorage：
sessionStorage和localstorage相似，可是瀏覽器關閉則會所有刪除，api和localstorage相同，實際項目中使用較少。
⑤ application cache
application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時經過manifest文件來讀取本地文件或是請求服務器文件。

三、啓用壓縮

在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減小通訊傳輸的數據量。若是能夠的話，儘量的將外部的腳本、樣式進行合併，多個合爲一個。文本文件的壓縮效率可達到80%以上，所以HTML、CSS、javascript文件啓用GZip壓縮可達到較好的效果。可是壓縮對服務器和瀏覽器產生必定的壓力，在通訊帶寬良好，而服務器資源不足的狀況下要權衡考慮。

採用網上在線壓縮工具（jQuery MiniUI）本身壓縮或者經過webpack、gulp等打包工具進行壓縮處理。

四、CSS Sprites

五、LazyLoad Images：對於圖片而言，在頁面剛加載的時候能夠只加載第一屏，當用戶繼續日後滾屏的時候才加載後續的圖片。
①jqueryLazyload方式
②echo.js方式

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

後續文章還會具體講各類優化方法，但願你們一塊兒學習~