新手推薦，前端性能優化小整理，效率加倍

1、 瀏覽器渲染原理：

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繪製。

2、 瀏覽器宿主環境層面：

1.因爲單線程解析阻塞限制，能夠用script defer屬性異步加載，樣式放頭部，腳本放底部；

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

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

4.瀏覽器渲染時，開啓硬件加速能夠生成複合層，複合層交給GPU渲染，但不能濫用；

3、 網絡層面：

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（邀請碼：寂靜），想學習交流前端，打算深刻了解這個行業的朋友，無論你是小白仍是大牛都歡迎加入，你們一塊兒交流學習。

4、 代碼層面：

1.利用requestAnimationFrame作持續動畫；

2.緩存dom，優化循環體；

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

4.閉包使用，內存回收；

5.代碼複用;

6.遞歸時採用尾調用自身即尾遞歸，永遠不會發生棧溢出；

7.硬件加速時添加z-index，人爲干擾複合層的排序，有效減小chrome建立沒必要要的複合層。