一、瀏覽器渲染原理和關鍵渲染路徑

瀏覽器構建渲染樹，DOM 樹和 CSSDOM 樹合成為 Render Tree 渲染樹。

瀏覽器的渲染流程，如下所示：
JavaScript -> Style -> Layout -> Paint -> Composite。

布局與繪制，如下所示：

• 渲染樹只包含網頁需要的節點
• 布局計算每個節點精確的位置和大寫，盒模型
• 繪制是像素化每個節點的過程

影響回流的操作，如下所示：

• 添加、刪除元素
• 操作 styles
• display: none
• offsetLeft、scrollTop、clientWidth
• 移動元素位置
• 修改瀏覽器大小、字體大小

避免布局抖動 Layout thrashing，如下所示：

• 避免回流
• 讀寫分離

使用 FastDOM 可以批量的對 DOM 的讀寫操作，進行性能提升。

二、復合線程、圖層及優化

復合線程，如下所示：

• 將頁面拆分圖層進行繪制再進行復合
• 利用 DevTools 了解網頁的圖層拆分情況
• 哪些樣式僅影響復合

減少重繪的方案

• 利用 DevTools 識別 paint 的瓶頸
• 利用 will-change 創建新的圖層

對于事件處理函數，可以使用防抖處理。

React 時間調度的基本原理，如下所示：

• requestIdleCallback 的問題
• 通過 rAF 模擬 rIC

三、JS 開銷及優化

JavaScript 的開銷縮短解析時間， JavaScript 的開銷會存在于加載、執行、解析和編譯中。

JavaScript 開銷減少的方案，如下所示：

• Code splitting 代碼拆分，按需加載
• Tree shaking 代碼減重

JavaScript 減少主線程工作量，如下所示：

• 避免長任務
• 避免超過 1KB 的行間腳本
• 使用 rAF 和 rIc 進行時間調度

對于漸進式啟動 Progressive Bootstrapping，可見不可交互與最小可交互資源集。

V8 優化機制，如下所示：

• 腳本流
• 字節碼緩存
• 懶解析

抽象語法樹，如下所示：

• 源碼 -> 抽象語法樹 -> 字節碼 Bytecode -> 機器碼
• 編譯過程會進行優化
• 運行時可能發生反優化

函數的解析方式，如下所示：

• lazy parsing 懶解析、eager parsing 饑餓解析
• 利用 Optimize.js 優化初次加載時間

對象優化，如下

• 以相同順序初始化對象成員，避免隱藏類的調整
• 實例化后避免添加新屬性
• 盡量使用 Array 代替 array-like 對象
• 避免讀取超過數組的長度
• 避免元素類型轉換

四、HTML 和 CSS 優化

HTML 優化，如下所示：

• 減小 iframes 使用
• 避免 table 布局
• 壓縮空白符
• 刪除注釋
• 避免節點深層級嵌套
• CSS 和 Javascript 盡量外鏈
• 刪除元素默認屬性

如果借助工具，可以使用 html-minifier 去壓縮 HTML。

對于樣式計算開銷，可以利用 DevTools 測量樣式計算開銷。

對于 CSS 優化，如下所示：

• 降低 CSS 對渲染的阻塞
• 利用 GPU 進行完成動畫
• 使用 contain 屬性
• 使用 font-display 屬性

總結

以上是生活随笔為你收集整理的前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。