一、瀏覽器渲染原理和關(guān)鍵渲染路徑

瀏覽器構(gòu)建渲染樹，DOM 樹和 CSSDOM 樹合成為 Render Tree 渲染樹。

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

布局與繪制，如下所示：

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

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

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

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

• 避免回流
• 讀寫分離

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

二、復(fù)合線程、圖層及優(yōu)化

復(fù)合線程，如下所示：

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

減少重繪的方案

• 利用 DevTools 識別 paint 的瓶頸
• 利用 will-change 創(chuàng)建新的圖層

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

React 時間調(diào)度的基本原理，如下所示：

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

三、JS 開銷及優(yōu)化

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

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

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

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

• 避免長任務(wù)
• 避免超過 1KB 的行間腳本
• 使用 rAF 和 rIc 進行時間調(diào)度

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

V8 優(yōu)化機制，如下所示：

• 腳本流
• 字節(jié)碼緩存
• 懶解析

抽象語法樹，如下所示：

• 源碼 -> 抽象語法樹 -> 字節(jié)碼 Bytecode -> 機器碼
• 編譯過程會進行優(yōu)化
• 運行時可能發(fā)生反優(yōu)化

函數(shù)的解析方式，如下所示：

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

對象優(yōu)化，如下

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

四、HTML 和 CSS 優(yōu)化

HTML 優(yōu)化，如下所示：

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

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

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

對于 CSS 優(yōu)化，如下所示：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。