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

本文链接：https://blog.csdn.net/owenzhang24/article/details/122234050

原文地址：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 ，我们看到以下信息，首先为完整的网格：