前端進階（1）Web前端性能優化
Web前端性能優化, 不僅能夠改善站點的用戶體驗，並且能夠節省相當的資源利用。下面將從1）伺服器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。
目錄：
1. 伺服器優化
1.1. 使用內容分發網路（CDN）
把網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
1.2. 伺服器使用http2.0協議
Http2.0的優點
- 二進位分幀
- 首部壓縮
- 流量控制
- 多路復用
- 請求優先順序
- 伺服器推送
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定址，與伺服器建立連接，發送數據，等待伺服器響應，接收數據這樣一個消耗時間成本和資源成本的複雜的過程。 常見方法：
- 合併多個CSS文件和js文件, 並進行最小化處理。
- 利用CSS Sprites整合影像，
- 行內圖片Base64編碼，使用 data：URL scheme在實際的頁面嵌入影像數據
- 合理設置HTTP快取
2.2. 減少DNS查找
為了減少DNS的詢次數，最好的解決方法就是在頁面中減少不同的域名請求的機會。
2.3. 避免重定向 301/30x
如果重定向的話，就需要在訪問過程中重複發起一連串的動作，會消耗很多時間，因此避免出現多次重定向地址或資源的訪問。
2.4. 避免在html標籤中寫style屬性
js,css 寫到單獨的文件中，便於瀏覽器快取。
2.5. 非同步載入組件,預載入組件 (ansyc, defer)
ansyc, defer不會阻塞瀏覽器的文檔解析。
- ansyc用於非同步載入
- 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選擇符優化
- 瀏覽器對選擇符的解析是從右往左進行的
- 按照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程式碼注意
- 減少作用域鏈查找（多用局部變數，少訪問全局變數）
- 減少閉包的使用，避免記憶體泄漏
- 謹慎使用with
- 避免使用eval Function函數
- 字元串拼接， 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，降低每個站點的請求書，提高單個請求的響應時間。
