1. 程式人生 > >Web—10-前端效能優化

Web—10-前端效能優化

### 前端效能優化從使用者訪問資源到資源完整的展現在使用者面前的過程中,通過技術手段和優化策略,縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。網站的效能直接會影響到使用者的數量,所有前端效能優化很重要。前端效能優化分為如下幾個方面:### 一、程式碼部署:```1、程式碼的壓縮與合併2、圖片、js、css等靜態資源使用和主站不同域名地址儲存,從而使得在傳輸資源時不會帶上不必要的cookie資訊。3、使用內容分發網路 CDN4、為檔案設定Last-Modified、Expires和Etag5、使用GZIP壓縮傳送6、權衡DNS查詢次數(使用不同域名會增加DNS查詢)7、避免不必要的重定向(加"/") ```### 二、編碼##### html:```1、使用結構清晰,簡單,語義化標籤2、避免空的src和href3、不要在HTML中縮放圖片 ```##### css:```1、精簡css選擇器2、把CSS放到頂部3、避免@import方式引入樣式4、css中使用base64圖片資料取代圖片檔案,減少請求數,線上轉base64網站:http://tool.css-js.com/base64.html5、使用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非同步載入js3、JS放到頁面底部引入4、避免全域性查詢5、使用原生方法6、用switch語句代替複雜的if else語句7、減少語句數,比如說多個變數宣告可以寫成一句8、使用字面量表達式來初始化陣列或者物件9、使用innerHTML取代複雜的元素注入10、使用事件代理(事件委託)11、避免多次訪問dom選擇集12、高頻觸發事件設定使用函式節流13、使用Web Storage快取資料 ```