2

我有一个用 SlickGrid 构建的数据网格。我使用css 亮度过滤器使奇数行比偶数行更暗，并使用css 背景混合使选定行具有蓝色，同时仍保持奇数/偶数行颜色交替。

.slick-row.odd {
  filter: brightness(.96);
}

.slick-row.selected {
  background-image: linear-gradient(0deg, #DFE8F6, #DFE8F6);
  background-blend-mode: multiply;
}

只是给出一些想法，网格看起来像这样：

在此处输入图像描述 我最近意识到的是，网格在垂直滚动时开始闪烁。一般来说，新行的输出比以前慢一些，偶数行的输出速度比奇数行快。它让您在快速滚动期间感觉所有奇数行（应该更暗）都是空的，而偶数行有数据。

我已经按照一些教程检查了 chrome 开发工具，我可以找到这些教程来解决渲染性能问题。我注意到亮度过滤器创建了许多图层边界。我认为它使每一行成为一个单独的层。

关闭样式确实使渲染更快，我的问题是它是否因为css过滤器和图层而变慢，或者只是因为我有很多样式要应用？

4

0 回答 0