我有一个由〜1k元素组成的树形HTML结构。
页面滚动伴随着低FPS。
性能测试显示频率为Update Layer Tree
,这占用了60%的时间。
CSS和滚动性能
我怀疑,原因在于CSS:禁用了JavaScript并不能改变什么,但除去各种风格的解决了这个问题。
那么,哪些CSS属性或选择器可以导致它呢?
我有一个由〜1k元素组成的树形HTML结构。
页面滚动伴随着低FPS。
性能测试显示频率为Update Layer Tree
,这占用了60%的时间。
CSS和滚动性能
我怀疑,原因在于CSS:禁用了JavaScript并不能改变什么,但除去各种风格的解决了这个问题。
那么,哪些CSS属性或选择器可以导致它呢?
我不知道是否有任何特定的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>
尝试设置'指针事件:none'所有元素上滚动时 - 看到这个[文章](https://www.thecssninja.com/css/pointer-events- 60fps的)。 –
@OriDrori我已经尝试过了,并没有帮助 – Legotin
玩过溢出和[包含](https://developers.google.com/web/updates/2016/06/css-containment)属性。 – wOxxOm