一、 瀏覽器渲染原理：

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.由於單執行緒解析阻塞限制，可以用script defer屬性非同步載入，樣式放頭部，指令碼放底部；

2.結合dns-prefetch、dns-preload、preload預載入資源；

3.利用事件冒泡機制，採用事件委託方法繫結事件；

4.瀏覽器渲染時，開啟硬體加速可以生成複合層，複合層交給GPU渲染，但不能濫用；

三、 網路層面：

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，負載均衡；

做為一名前端程式設計師，有一個學習的氛圍跟一個交流圈子特別重要。這是我的一個前端學習交流群 330336289（邀請碼：寂靜），想學習交流前端，打算深入瞭解這個行業的朋友，不管你是小白還是大牛都歡迎加入，大家一起交流學習。

四、 程式碼層面：

1.利用requestAnimationFrame做持續動畫；

2.快取dom，優化迴圈體；

3.減少重繪，迴流，樣式層面進行層提升；

4.閉包使用，記憶體回收；

5.程式碼複用;

6.遞迴時採用尾呼叫自身即尾遞迴，永遠不會發生棧溢位；

7.硬體加速時新增z-index，人為干擾複合層的排序，有效減少chrome建立不必要的複合層。