2017-08-01 159 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