爲什麼在文檔元素上觸發佈局？

Question

從屏幕截圖可以看出，在每個幀中根元素（#document）觸發佈局，導致下一個操作（如繪製）。

此佈局是由Recalc風格造成的，我無法理解它爲什麼會發生。沒有腳本在運行。只是Recalc風格>佈局> ...

我需要知道爲什麼這種Recalc風格可能發生沒有腳本？

附加信息：

• 此網頁使用Semantic UI框架
• 它包含自定義網格
• 此重新計算樣式>中進行佈局操作過框架，即使網頁處於閒置狀態。

Answer 1

首先，這是一個問題嗎？除非遇到性能問題，否則不要浪費時間嘗試過早優化。

接下來，啓用Chrome rendering settings以顯示屏幕的哪些區域是GPU圖層以及哪些部分正在重新繪製。

風格重新計算和繪畫可能會發生許多與JavaScript無關的原因。瀏覽器調整大小，在頁面加載期間加載新項目時執行rel-layout的表等。由於您沒有提供關於正在加載的頁面的任何信息，所以很難說。

我的猜測是你有某種CSS動畫被應用到屬性，而不是翻譯，旋轉，縮放或不透明。所有這些屬性都是GPU加速的，不會觸發重繪，但是，褪色背景顏色，更改邊框厚度，即使調整top，left，right和bottom屬性都會導致重新繪製。

你已經提到你正在使用Semantic UI。語義或其中的一個主題都會導致重繪。您的屏幕截圖實際上並未證明腳本未被調用。