CSS和滾動性能

Question

我有一個由〜1k元素組成的樹形HTML結構。
頁面滾動伴隨着低FPS。
性能測試顯示頻率爲Update Layer Tree，這佔用了60％的時間。

我懷疑，原因在於CSS：禁用了JavaScript並不能改變什麼，但除去各種風格的解決了這個問題。

那麼，哪些CSS屬性或選擇器可以導致它呢？

Answer 1

我不知道是否有任何特定的CSS規則會導致此類行爲。我將不得不看看頁面來檢查它。儘管如此，使大型列表滾動更順利的一項經過驗證的技術是將transform: translate3d(...)添加到列表中（至少對於我的公司來說，它證明了它的價值）。下面的代碼給出了一個例子。也許這可以在一定程度上解決你的問題。

function createList (id) { 
 
    const container = document.getElementById(id); 
 
    
 
    for (let i = 0; i < 1e5; i++) { 
 
    const div = document.createElement('div'); 
 
    div.textContent = i; 
 
    container.appendChild(div); 
 
    } 
 
} 
 

 
createList('container-1'); 
 
createList('container-2');

body { 
 
    display: flex; 
 
    flex-flow: row no-wrap; 
 
} 
 

 
section { 
 
    height: 500px; 
 
    width: 500px; 
 
    overflow-y: scroll; 
 
} 
 

 
#container-1 { 
 
    background: red; 
 
} 
 

 
#container-2 { 
 
    background: green; 
 
    transform: translate3d(0,0,0); 
 
}

<section id="container-1"></section> 
 
<section id="container-2"></section>