0. 瀏覽器渲染原理：
- 輸入網址 -> dns查詢 -> dns快取 -> 三次握手建立連線 -> 瀏覽器傳送請求到伺服器 -> 伺服器返回html -> 瀏覽器渲染頁面；
- 瀏覽器渲染過程（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. 瀏覽器宿主環境層面：
- 由於單執行緒解析阻塞限制，可以用script defer屬性非同步載入，樣式放頭部，指令碼放底部；
- 結合dns-prefetch、dns-preload、preload預載入資源；
- 利用事件冒泡機制，採用事件委託方法繫結事件；
- 瀏覽器渲染時，開啟硬體加速可以生成複合層，複合層交給GPU渲染，但不能濫用；
2. 網路層面：
- 減少http請求數量：css、js合併，css sprites，font-icon，base64編碼圖片，圖片懶載入；
- 減輕http資料請求大小：靜態資源壓縮，tinypng壓縮圖片，webp格式，gzip壓縮；
- 對於cookie效能bug，靜態資源分開部署，cdn快取；
- 快取處理（強快取，協商快取），本地快取；
- dns-prefetch，preload；
- 反向代理，cdn，負載均衡；
3. 程式碼層面：
- 利用requestAnimationFrame做持續動畫；
- 快取dom，優化迴圈體；
- 減少重繪，迴流，樣式層面進行層提升；
- 閉包使用，記憶體回收；
- 程式碼複用;
- 遞迴時採用尾呼叫自身即尾遞迴，永遠不會發生棧溢位；
-
硬體加速時新增z-index，人為干擾複合層的排序，有效減少chrome建立不必要的複合層。