CSS 和滚动性能

Question

我有一个由 ~1k 元素组成的树状 HTML 结构。
页面滚动伴随着低 FPS。
性能测试显示频繁Update Layer Tree，占用了 60% 的时间。

我怀疑原因出在 CSS 上:禁用 javascript 不会改变任何东西，但删除所有样式可以解决问题。

那么，哪些 CSS 属性或选择器会导致它？

Answer 1

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