我如何用一行Css代码使谷歌浏览器的数据网格滚动快10倍

原文地址：How I made Google’s data grid scroll 10x faster with one line of CSS

原文作者：Johan Isaksson

译文出自：掘金翻译计划

在 我的公司, 我们使用 谷歌搜索控制台 来检查索引状态和优化我们的网站的可见性。您还可以检查哪些外部网站链接到您的页面，当我浏览"顶部链接网站"页面时，我注意到了 主要 的滚动滞后。当选择显示较大的数据集（500 行）而不是默认的 10 个结果时，就会发生这种情况。

谷歌搜索控制台中的 “Top linking sites” 部分，每页 500 行

作为一个对前端的曼福斯感兴趣的人， 我忍不住潜入水中， 看看我是否能弄明白原因。毕竟，谷歌正在大力推动网络性能，因此人们期望他们在自己的面向公众的应用程序中设定一个良好的基线 🤔

第 1 步 - 录制性能配置文件

在这些情况下，性能配置文件非常有帮助，只需查看报告，您通常可以清楚地了解某些东西为什么性能不佳。因此，我打开并开始录制，向下滚动列表一点，然后停止录制。这就是我所看到的：DevTools / Performance

滚动"顶部链接站点"数据网格的性能配置文件，非常低的 FPS

"任务"块上的那些红耳朵表明，在滚动时，某些东西需要的时间比可接受的时间要长。一般来说，您希望将这些方块保持在 16 ms 以下，以实现理想的 60 FPS 滚动。在图像中，红耳块平均约150ms，这相当于大约6-7 FPS。加油谷歌，可以做得更好！ 🐢

第 2 步 - 找出问题所在

顶部的时间线图显示了 CPU 对不同类型的任务的忙碌程度：JavaScript 的橙色、布局和样式的紫色以及绘画的绿色。这里是所有紫色的， 表明这不是一个 Javascript 问题， 而是一个 Dom / 造型问题：

图表显示 CPU 忙于处理布局

这在 CPU 图表下方的瀑布图中得到确认。它使用相同的颜色编码，在大多数录音中，它会有很多橙色和少一点紫色和绿色。对于此记录，它显示时间主要用于更新图层，如紫色方块中的文本所示，其中表示：Update layer tree:

瀑布图显示， “Update layer tree” 是使滚动变慢的原因。

为滚动内容、翻译内容等创建图层。也许他们有很多？让我们来看看！

步骤 3 - 检查这些层

Chrome DevTools 包括大量有用的工具，其中一些工具比其他工具更隐藏。层面板就是这样一个隐藏的宝石，要找到它，你必须点击菜单按钮在DevTools和挑选。对于我的场景，它看起来像这样： More tools / Layers

铬 DevTools 中的"层"面板，层层内容一直向下

它没有那么多的层，但它 确实 有几个巨大的。他们似乎一直有内容，导致结论是，谷歌使用的数据网格不使用虚拟渲染。这解释了它的一部分，但500行仍然不是那么多。肯定还有更多...

第 4 步 - 检查 DOM

不幸的是，DOM 在包含许多元素时不是很出色。如果是这样，则不需要在网络上各种流行的 JS 数据网格中实现虚拟化技术。在这一点上，一个有根据的猜测是，表呈现了很多元素。通过在 DevTools 控制台上设置 实时表达式 您可以在元素面板中点击并找出答案， Console, 切换到 Create live expression 单击按钮 (the eye) 和 类型 $0.querySelectorAll('*').length.

现在，当点击面板时Elements ，我们看到以下信息，首先为完整的网格：

显示所选元素的后代元素计数的实时表达

如上所示，它产生 16，000 + DOM 元素，仅显示 500 行，这有点过分。单击文档的主体，我们看到：

很多元素！

整页包含 38，000 多个 （！） 元素， 这不是 构建快速 Web 应用方式！这里要做的显而易见的事情是改变使用具有虚拟渲染的数据网格，但让我们看看我们能否以更少的努力改进已经存在的数据网格。

第 5 步 - 改善情况

基于性能配置文件中的数据，我怀疑在滚动网格时，整个页面都已布局。并且指出许多要素的成本很高。要是有办法限制效果就好了 ... ...

好消息 - 😊 我试着应用一些秘密酱汁， 再次滚动， 现在感觉好多了。这也清楚地显示在它的性能配置文件：

滚动改进了很多！

现在每个帧需要大约 16 ms，我们以接近 60 FPS而不是60 f7 的速度滚动。了不起！ 💪

那我做了什么？我只是在面板上添加了一行CSS，说明它不会影响页面上其他元素的布局或样式：<table> on the Elements

table {
 contain: strict;
 }

如这里所示：

就这样， 单行 Css 快10倍 你可以尝试这个 “fix” 自己在自己的 Google Search Console.

了解更多关于CSS contain 在 MDN.

植入广告：如果您需要一个可执行的数据网格处理 10 万+行与平滑滚动，请务必查看 Bryntum 网格 (由我和我的同事开发).