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

Web—10-前端性能優化

初始 tor ref lse 多次 動畫 數組 用戶訪問 .com

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

前端性能優化分為如下幾個方面:
### 一、代碼部署:
```
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、使用字體圖標
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、使用原生方法
6、用switch語句代替復雜的if else語句
7、減少語句數,比如說多個變量聲明可以寫成一句
8、使用字面量表達式來初始化數組或者對象
9、使用innerHTML取代復雜的元素註入
10、使用事件代理(事件委托)
11、避免多次訪問dom選擇集
12、高頻觸發事件設置使用函數節流
13、使用Web Storage緩存數據
```

Web—10-前端性能優化