前端進階（1）Web前端性能優化

前端進階（1）Web前端性能優化

Web前端性能優化, 不僅能夠改善站點的用戶體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。

目錄：

• 1. 服務器優化
  • 1.1. 使用內容分發網絡（CDN）
  • 1.2. 服務器使用http2.0協議
  • 1.3. GZIP壓縮
  • 1.4. 使用瀏覽器緩存
  • 1.5. 設置ETag
• 2. HTML內容優化
  • 2.1. 減少HTTP請求數
  • 2.2. 減少DNS查找
  • 2.3. 避免重定向 301/30x
  • 2.4. 避免在html標簽中寫style屬性
  • 2.5. 異步加載組件,預加載組件 (ansyc, defer)
  • 2.6. 延遲、分頁加載圖片
  • 2.7. 減少DOM元素數量
  • 2.8. 最小化iframe的數量
  • 2.9. 避免404
  • 2.10. 對Ajax請求使用GET方法
  • 2.11. 避免空的圖像src
• 3. CSS優化
  • 3.1. 將CSS代碼放在HTML頁面的頂部
  • 3.2. 合並、壓縮CSS
  • 3.3. CSS選擇符優化
  • 3.4. 避免使用CSS表達式
  • 3.5. 使用來代替@import
  • 3.6. 避免使用Filters
• 4. javascript優化
  • 4.1. 將JavaScript腳本放在頁面的底部
  • 4.2. 將JavaScript和CSS作為外部文件來引用
  • 4.3. 合並、壓縮JavaScript
  • 4.4. 刪除無用、重復的腳本
  • 4.5. 最小化DOM的訪問
  • 4.6. 開發智能的事件處理程序
  • 4.7. javascript代碼注意
• 5. 圖像優化
  • 5.1. 優化圖片大小
  • 5.2. 通過CSS Sprites優化圖片
  • 5.3. 不要在HTML中使用縮放圖片
  • 5.4. favicon.ico要小而且可緩存
• 6. 其他
  • 6.1. 減小Cookie大小，盡量不使用cookie
  • 6.2. 負載均衡

1. 服務器優化

1.1. 使用內容分發網絡（CDN）

把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。

1.2. 服務器使用http2.0協議

Http2.0的優點

1. 二進制分幀
2. 首部壓縮
3. 流量控制
4. 多路復用
5. 請求優先級
6. 服務器推送

e.g 使用nginx, 要求 1)v1.9.5以上, 2)使用https；

1.3. GZIP壓縮

1.4. 使用瀏覽器緩存

CSS、javascript、logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。

通過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，減少網絡請求次數。

1.5. 設置ETag

ETags（Entity tags，實體標簽）是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。

2. HTML內容優化

2.1. 減少HTTP請求數

這條策略是最重要最有效的，因為一個完整的請求要經過DNS尋址，與服務器建立連接，發送數據，等待服務器響應，接收數據這樣一個消耗時間成本和資源成本的復雜的過程。 常見方法：

1. 合並多個CSS文件和js文件, 並進行最小化處理。
2. 利用CSS Sprites整合圖像，
3. 行內圖片Base64編碼，使用 data：URL scheme在實際的頁面嵌入圖像數據
4. 合理設置HTTP緩存

2.2. 減少DNS查找

為了減少DNS的詢次數，最好的解決方法就是在頁面中減少不同的域名請求的機會。

2.3. 避免重定向 301/30x

如果重定向的話，就需要在訪問過程中重復發起一連串的動作，會消耗很多時間，因此避免出現多次重定向地址或資源的訪問。

2.4. 避免在html標簽中寫style屬性

js,css 寫到單獨的文件中，便於瀏覽器緩存。

2.5. 異步加載組件,預加載組件 (ansyc, defer)

ansyc, defer不會阻塞瀏覽器的文檔解析。

1. ansyc用於異步加載
2. defer用於預加載

2.6. 延遲、分頁加載圖片

對於圖片而言，在頁面剛加載的時候可以只加載第一屏，當用戶繼續往后滾屏的時候才加載后續的圖片。這樣一來，假如用戶只對第一屏的內容感興趣時，那剩余的圖片請求就都節省了。

2.7. 減少DOM元素數量

頁面中存在大量DOM元素,會導致javascript遍歷DOM的效率變慢。

2.8. 最小化iframe的數量

iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其創建速度比其他包括JavaScript和CSS的DOM元素的創建慢了1-2個數量級。

2.9. 避免404

HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。

2.10. 對Ajax請求使用GET方法

2.11. 避免空的圖像src

3. CSS優化

3.1. 將CSS代碼放在HTML頁面的頂部

3.2. 合並、壓縮CSS

3.3. CSS選擇符優化

1. 瀏覽器對選擇符的解析是從右往左進行的
2. 按照ID查詢效率最高

3.4. 避免使用CSS表達式

3.5. 使用來代替@import

3.6. 避免使用Filters

4. javascript優化

4.1. 將JavaScript腳本放在頁面的底部

4.2. 將JavaScript和CSS作為外部文件來引用

在實際應用中使用外部文件可以提高頁面速度，因為JavaScript和CSS文件都能在瀏覽器中產生緩存。

4.3. 合並、壓縮JavaScript

4.4. 刪除無用、重復的腳本

4.5. 最小化DOM的訪問

使用JavaScript訪問DOM元素比較慢

4.6. 開發智能的事件處理程序

4.7. javascript代碼注意

1. 減少作用域鏈查找（多用局部變量，少訪問全局變量）
2. 減少閉包的使用，避免內存泄漏
3. 謹慎使用with
4. 避免使用eval Function函數
5. 字符串拼接， Javascript中使用”+” 號來拼接字符串效率是比較低，建議使用數組的 join方法

5. 圖像優化

5.1. 優化圖片大小

5.2. 通過CSS Sprites優化圖片

5.3. 不要在HTML中使用縮放圖片

5.4. favicon.ico要小而且可緩存

6. 其他

6.1. 減小Cookie大小，盡量不使用cookie

cookie包含在每次請求和響應中，太大的cookie會嚴重影響數據傳輸

6.2. 負載均衡

負載均衡load balancer，降低每個站點的請求書，提高單個請求的響應時間。