在html標籤上做多個類總是會影響渲染性能？

通過interesting video發現了有關在Chrome開發工具中調試呈現性能的信息。在他的課程中，奧馬爾將html標籤上CSS類的變化標識爲渲染瓶頸的來源。 Devtools顯示，更改此類可能會影響html以下DOM中的3,874個元素，並觸發昂貴的recalculate style操作。在html標籤上做多個類總是會影響渲染性能？

在過去，我已將CSS類添加到我的html或body標記中，作爲表示頁面狀態的便捷方式。

您的CMS可能會出於同樣的目的。例如，在一個WordPress網站上，您可能會在帖子的body標籤上看到一堆類，如post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover。

我們應該避免這種做法嗎？或者只會在CSS規則中使用類時影響渲染性能？

來源

2017-09-27 And Finally

我不確定是什麼問題。性能問題是由頁面的必要重新繪製造成的。所以如果沒有重新繪畫，那就沒有問題了。 –

不同的CSS方法，比如BEM，就是使用這種模式，沒有人說過一行中堆疊多於一個類的性能。 – Nicholas

感謝@MrLister，我想我明白了 - 所以，如果有相關的一類無CSS規則，我改變HTML標記的類，瀏覽器將不會嘗試重新計算的任何樣式。我認爲，從奧馬爾的視頻來看，重要的一點是，當DOM規則受到DOM頂部標籤上的類影響時，這可能會很昂貴。 –

它應該只會影響性能，如果你有CSS樣式應用到它。

瀏覽器廠商花費大量時間試圖確保一流的性能，從而CSS規則進行處理，使它們可以非常有效地掃描需要渲染的變化......甚至當應用它們試圖優化，這將導致更改級聯迴流。

來源

2018-03-10 01:16:38 scunliffe

謝謝@scunliffe，這似乎是答案 - 我們只需要擔心這些類，如果他們添加CSS規則。 –

在html標籤上做多個類總是會影響渲染性能？

回答

相關問題