CSS 和滚动性能

Question

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

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

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

Answer 1

我不知道是否有任何特定的 CSS 规则会导致这种行为。我将不得不查看该页面来检查它。尽管如此，一种使大型列表滚动更顺畅的成熟技术是将transform: translate3d(...) 添加到列表中（至少对我的公司而言，它证明了它的价值）。下面的 sn-p 给出了一个例子。也许这可以在一定程度上解决你的问题。

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>