# 前端性能優化

網頁生成過程：

HTML代碼轉化成DOM

CSS代碼轉化成CSSOM（CSS Object Model）

結合DOM和CSSOM，生成一棵渲染樹（包含每個節點的視覺信息）

生成布局（layout），即將所有渲染樹的所有節點進行平面合成

將布局繪制（paint）在屏幕上

渲染：耗時的第四步（生成布局\flow）和第五步（繪制\paint）

重排（reflow）和重繪（repaint）

• 重繪不一定重排（例如僅改變文字顏色）
• 重排一定重繪（例如改變文字位置）

對于性能的影響

將CSS的讀操作和寫操作分離

提高性能的九個技巧

同上條。不要在兩個讀操作之間，加入一個寫操作。

如果某個樣式是通過重排得到的，那么最好緩存結果。

不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。

盡量使用離線DOM，而不是真實的DOM來改變元素樣式。

• 例如操作Document Fragment對象，完成后再把這個對象加入DOM。
• 例如使用 cloneNode() 方法，在克隆的節點上進行操作，然后再用克隆的節點替換原始節點。

先將元素設為display: none（需要1次重排和重繪），然后對這個節點進行100次操作，最后再恢復顯示（需要1次重排和重繪）。這樣就用兩次重新渲染，取代了可能高達100次的重新渲染。

position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。

只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。（visibility : hidden的元素只對重繪有影響，不影響重排。）

使用虛擬DOM的腳本庫，比如React等。

使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調節重新渲染（詳見后文）。

window.requestAnimationFrame()*

可以將某些代碼放到下一次重新渲染時執行。

window.requestIdleCallback()*

指定只有當一幀的末尾有空閑時間，才會執行回調函數。

轉載于:https://www.cnblogs.com/amberheart/p/9544459.html

總結

以上是生活随笔為你收集整理的前端性能优化总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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