前端效能優化

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

前端效能優化分為如下幾個方面：

一、程式碼部署：

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選擇器 2、把CSS放到頂部
3、避免@import方式引入樣式
4、css中使用base64圖片資料取代圖片檔案，減少請求數，線上轉base64網站：http://tool.css-js.com/base64.html
5、使用css動畫來取代javascript動畫
6、使用字型圖示,圖示庫網站：http://fontawesome.io/icons/，線上製作網站：www.iconfont.cn
7、使用css sprite
8、使用svg圖形
9、避免使用CSS表示式

a {star : expression(onfocus=this.blur)}

10、避免使用濾鏡

javascript：

1、減少引用庫的個數
2、使用requirejs或seajs非同步載入js
3、JS放到頁面底部引入
4、避免全域性查詢
5、減少屬性查詢
6、使用原生方法
7、用switch語句代替複雜的if else語句
8、減少語句數，比如說多個變數宣告可以寫成一句
9、使用字面量表達式來初始化陣列或者物件
10、使用DocumentFragments或innerHTML取代複雜的元素注入
11、使用事件代理(事件委託)
12、避免多次訪問dom選擇集
13、高頻觸發事件設定使用函式節流，如：onmousemove、onmouseover
14、使用Web Storage快取資料
15、使用Array的join方法來代替字串的“+”連線(先將要連線的字串放進陣列)