我有一个由 ~1k 元素组成的树状 HTML 结构。
页面滚动伴随着低 FPS。
性能测试显示频繁Update Layer Tree
,占用了 60% 的时间。
我怀疑原因出在 CSS 上:禁用 javascript 不会改变任何东西,但删除所有样式可以解决问题。
那么,哪些 CSS 属性或选择器会导致它?
最佳答案
我不知道是否有任何特定的 CSS 规则会导致此类行为。我必须查看页面才能检查它。尽管如此,使大型列表滚动得更顺畅的一种行之有效的技术是将 transform: translate3d(...)
添加到列表中(至少对我的公司来说它证明了它的值(value))。下面的代码片段给出了一个例子。也许这可以在一定程度上解决您的问题。
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>
关于CSS 和滚动性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45443784/