前端性能優化整理

0. 瀏覽器渲染原理：

1. 輸入網址  -> dns查詢 -> dns緩存 -> 三次握手建立連接 -> 瀏覽器發送請求到伺服器 -> 伺服器返回html -> 瀏覽器渲染頁面； 
2. 瀏覽器渲染過程（webkit為例）：
   ① 首先進行dom解析，css解析，構建dom樹；（display:none的元素在dom樹）
   ② css解析完成css rules加到dom樹上，生成render tree（迴流reflow階段，應儘量避免）；（display:none的元素不在dom樹）
   ③ 經過層疊上下文處理，生成render layer（重繪repaint階段），可以直接去paint頁面，或者去④；
   ④ 層合併後生成graphics layer，然後GPU繪製。

1. 瀏覽器宿主環境層面：

1. 由於單線程解析阻塞限制，可以用script defer屬性非同步載入，樣式放頭部，腳本放底部；
2. 利用事件冒泡機制，採用事件委托方法綁定事件；
3. 瀏覽器渲染時，開啟硬體加速可以生成複合層，複合層交給GPU渲染，但不能濫用；

2. 網路層面：

1. 減少http請求數量：css、js合併，css sprites，font-icon，base64編碼圖片，圖片懶載入；
2. 減輕http數據請求大小：靜態資源壓縮，tinypng壓縮圖片，webp格式，gzip壓縮；
3. 對於cookie性能bug，靜態資源分開部署，cdn緩存；
4. 緩存處理（強緩存，協商緩存），本地緩存；
5. dns-prefetch，preload；
6. 反向代理，cdn，負載均衡；

3. 代碼層面：

1.  利用requestAnimationFrame做持續動畫；
2. 緩存dom，優化迴圈體；
3. 減少重繪，迴流，樣式層面進行層提升；
4. 閉包使用，記憶體回收；
5. 代碼復用;
6. 遞歸時採用尾調用自身即尾遞歸，永遠不會發生棧溢出。