Web前端性能優化彙總

前端性能優化

• 前端頁面需要先下載到本地，然後渲染展示出來

• 從用戶訪問資源到資源完整的展現在用戶面前的過程中，通過技術手段和優化策略，
  縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。
  網站的性能直接會影響到用戶的數量，所有前端性能優化很重要。

前端性能優化分爲如下幾個方面：

一、代碼部署：

1、代碼的壓縮與合併（最終代碼都會壓縮成一行）
2、圖片、js、css等靜態資源使用和主站不同域名地址存儲，從而使得在傳輸資源時不會帶上不必要的cookie信息。
3、使用內容分發網絡 CDN （不同地方建設服務器）
4、爲文件設置Last-Modified(最後一次修改)、Expires(過期時間)和Etag(時間戳) （網站請求時候，對比時間信息，如果沒有變化直接讀取本地緩存，避免重複下載）
5、使用GZIP壓縮傳送
6、權衡DNS查找次數(使用不同域名會增加DNS查找) (網站域名解析需要時間)
7、避免不必要的重定向(加"/")

二、編碼

- html：
    1、使用結構清晰，簡單，語義化標籤
    2、避免空的src和href
    3、不要在HTML中縮放圖片
- css：
    1、精簡css選擇器(儘量要短，層級不要超過4層)
    2、把CSS放到頂部(css讀完後，渲染頁面)
    3、避免@import方式引入樣式(css中再引入css樣式)
    4、css中使用base64圖片數據取代圖片文件，減少請求數，
        在線轉base64網站：http://tool.css-js.com/base64.html
        圖片轉換爲數據編碼，數據直接放在圖片的位置，不用去請求圖片了
        一般小圖片轉換，大圖片數據太長了，一般不用
    5、使用css動畫來取代javascript動畫
    6、使用字體圖標
    7、使用css sprite(雪碧圖)
    8、使用svg圖形
    9、避免使用CSS表達式
        body{
         background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
        }
    10、避免使用css濾鏡
- javascript：
    1、減少引用庫的個數
    2、使用requirejs或seajs異步加載js
    3、JS放到頁面底部引入(實際開發是放在頭部)
    4、避免全局查找 (查找結果定義爲一個變量，多次使用的一個屬性定義爲一個變量)
    5、使用原生方法 (實際使用jQuery的方法，原生JS可能會不兼容)
    6、用switch語句代替複雜的if else語句
    7、減少語句數，比如說多個變量聲明可以寫成一句
    8、使用字面量表達式來初始化數組或者對象
    9、使用innerHTML取代複雜的元素注入
    10、使用事件代理(事件委託)
    11、避免多次訪問dom選擇集
    12、高頻觸發事件設置使用函數節流
    13、使用Web Storage緩存數據