2017-08-01 160 views
1

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

enter image description here enter image description hereCSS和滾動性能

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

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

+0

嘗試設置'指針事件:none'所有元素上滾動時 - 看到這個[文章](https://www.thecssninja.com/css/pointer-events- 60fps的)。 –

+0

@OriDrori我已經嘗試過了,並沒有幫助 – Legotin

+0

玩過溢出和[包含](https://developers.google.com/web/updates/2016/06/css-containment)屬性。 – wOxxOm

回答

0

我不知道是否有任何特定的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>

+0

感謝您的回答。對'body'使用'display'和'flex-flow'屬性有什麼意義? – Legotin

+0

@legotin我只是想顯示彼此相鄰的例子。可以使用float來代替。然而唯一重要的是'transform:translate3d(0,0,0)'。這個「訣竅」實際上很安靜,例如見http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css – SVSchmidt

+0

不過,它並沒有幫助( – Legotin