web前端性能優化總結

前段時間作了個web前端性能分享，利用週末整理總結下。web前端性能優化主要手段有減小http請求、減小cookie傳輸、使用瀏覽器緩存、啓用壓縮、調整css和javascript引用順序等。

一、減小http請求

當請求的頁面包含大量圖片、css、javascript等資源時，致使瀏覽器創建大量socket鏈接和關閉，在某種程度上會形成必定資源浪費，加劇服務器負荷。http協議是無狀態的應用層協議，每次http請求都會創建socket鏈接，從而進行數據傳輸，服務器對於每一個請求也會創建獨立的線程去處理（每線程每請求），socket及線程創建開銷是很是昂貴。減小http請求數量可有效提升系統訪問性能。

常看法決方法是合併css、合併js、合併圖片在同一個文件中，瀏覽器只須一次請求可下載這資源。

二、減小cookie傳輸

熟識http協議同窗都知道每次的請求都會帶上cookie信息，太大的cookie會影響數據傳輸效率,因此不要寫過多的數據到cookie，可以使用html5存儲的特性；另一些資源請求，如css、js、圖片等，發送cookie是沒有任何做用，注意過taobao頁面加載過程的同窗可能會發現，一些靜態資源會使用獨立的域名，這是巧妙利用cooki跨域問題。因爲cookie設計存在安全性問題，隨着新戶追蹤技術成熟，cookie早晚會消失，推薦你們看下這文章http://lucb1e.com/rp/cookielesscookies/

三、啓用壓縮

現代的瀏覽器都已經支持數據壓縮編碼(http有關頭Accept-Language和Content-Encoding)，數據通過壓縮傳輸可減小在鏈路的時間，縮短總體的響應時間。普通的文件壓縮效率能夠達到80%左右，最經常使用gzip壓縮可能會有更高的壓縮效果。在服務器開戶壓縮也是至關簡單，不管nginx或是tomcat都提供設置選項。可是開啓壓縮對服務器會增長必定的額外的性能開銷，在帶寬良好，服務器壓力自己比較大的狀況須要認真考慮下。

四、使用瀏覽器緩存

相信你們都有這樣的體驗，當咱們第一次打開一個網站的，須要等待較長的時間頁面纔出現，可是以後再打開較第一次會快不少。其實，這主要歸功於瀏覽器緩存能力，不是每次的請求都到服務器獲取，而是會檢查本地緩存是否存在且有效，才做出是否發送http請求。大部的靜態資源，如css、js、圖片等，更新的機率是不多的，若是把這些資源緩存到瀏覽器中，能夠很好提升用戶的體驗和改善性能。經過設置http頭信息，可設定瀏覽器緩存。

Date: Sun, 29 Dec 2013 08:24:41 GMT 

Expires: Sun, 29 Dec 2013 09:24:41 GMT

Cache-Control: max-age=3600

ETag: "20b1add7ec1cd1:0"

五、調整css和javascript引用順序

把css放在頁面的頭部，頁面則放在頁面的尾部。其緣由是瀏覽器會等待全部的css下載完畢才進行頁面的渲染，放在頭部可加快頁面渲染時間；而javascript則加載完畢會立刻執行，如何執行時間過長會致使假死，由於執行javascript會致使其它相關線程阻塞等待，沒法響應用戶事件，因此javascript最好放到頁面最下面。最好解決方案是延遲加載，用到才真正加載進來。

參加資料

http://velocity.oreilly.com.cn/2013/index.php?func=session&id=14

http://www.oschina.net/translate/fantastic-front-end-performance