如何提高CSS網頁的渲染效率

頁面渲染主要經過稿件好友流程，介紹如下：

位元組、字元、標記、節點、物件模型

CSS 樹的生成與 DOM 樹的生成基本相同，如下所示。

為什麼會有CSS樹

因為CSS關係也會有父子關係，在CSS中通常被稱為繼承，所以一些樣式如font-size等子元素會繼承父元素，所以會生成一組對應DOM樹對應的CSS樹。

通過上面對頁面渲染的介紹，就很容易理解了重排是重新排列頁面結構並計算節點位置，而重繪是繪製頁面，只是一些樣式如背景、顏色變化等，不需要重新計算位置布局，所以重排總是會導致重繪，但重繪不一定會導致重排。

導致頁面重排的要點如下。

以上觸發了四次重排，通過上面的介紹，OffsetTop、Scrolltop、ClientTop等屬性都會被修改觸發重新排序，當瀏覽器獲取到DOM樣式時會立即進行重新排序，因為淮需要計算瀏覽器位置坐標的鍵，不會繼續觀察下面是否有DOM操作，下面介紹一下瀏覽器的渲染機制。

在這種情況下，看似會觸發四次重排，但實際上只會觸發一次重排，現代瀏覽器基本都有渲染機制，瀏覽器會批量修改樣式一次性執行，批量修改後再批量獲取 DOM 位置，但實際上只觸發一次。

等效。 綜上所述，不難理解，這種情況會觸發兩次回流，可以使用快取（實際上是拆分讀寫）進行優化。

這會觸發五個重新排列的特技。

避免設定大量的樣式屬性，因為如果通過設定樣式屬性來更改節點樣式，每次設定都會觸發重排，所以最好使用 class 屬性對元素進行動畫處理，並將 position 屬性設定出來，最好是 absoulte 或 fixed，出文件流， 這樣就不會影響其他元素的布局。

當（li）元素等子元素繫結到事件時，只能繫結父元素（ul）即可達到相同的效果，不僅減少了對DOM的操作，減少了重排或重繪，而且不需要分配大量的變數來儲存DOM和減少記憶體。

委託。 不要使用表布局，因為一旦表中的元素觸發重排，則整個表元素將觸發重排。 然後，當您必須使用 table 時，您可以設定 table-layout：

auto;或者 table-layout：fixed，允許表格逐行渲染，這也是為了限制重排的影響範圍。

不要乙個接乙個地修改屬性，你應該通過乙個類來完成。

相反。 引用