前端進階（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，降低每個站點的請求書，提高單個請求的響應時間。