前端性能優化整理

yzd 發布于2019-04-23 14:39 / 3540人閱讀

摘要：瀏覽器渲染原理輸入網址查詢緩存三次握手建立連接瀏覽器發送請求到服務器服務器返回瀏覽器渲染頁面瀏覽器渲染過程為例首先進行解析，解析，構建樹的元素在樹解析完成加到樹上，生成回流階段，應盡量避免的元素不在樹經過層疊上下文處理，生成重繪

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創建不必要的復合層。

? ? ?

GPU云服務器云服務器前端性能優化前端開發性能優化性能優化前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2334.html

前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
【前端性能優化】高性能JavaScript整理總結

摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。高性能JavaScript整理總結關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...

zzbo 2019-08-02 16:01 評論0 收藏0
【前端性能優化】高性能JavaScript整理總結

摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。高性能JavaScript整理總結關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...

bovenson 2019-08-22 15:41 評論0 收藏0