CSS如何对网页特定区域的页面绘制时间产生显着的负面影响？
12 css performance webpage repaint performance-testing
问题:
关于这个问题的宝贵文章 - 由JackPattishallJr提到.
CSS如何对网页特定区域的页面绘制时间产生显着的负面影响？
例如:
我不知道CSS是否根据用户在页面中的位置生效.这种行为是否确定它确实存在？
是否存在可能导致性能不佳的冲突或异常CSS定位,动画等？
CSS样式如何直接和一致地链接到页面性能？具体来说,页面绘制时间.
更新:我根据刚才做的两个测试编辑了问题和示例:
如果我的浏览器没有启用javascript,那么糟糕的性能问题(令人惊讶)就是一致的.
删除有问题区域的样式后,问题得到解决(但不完全,因为现在我的页面很难看).
页面绘制时间问题
我注意到我的网页在页面的某个特定区域表现不佳(滞后).
为了研究这个问题,我启用了show paint rectangles并且enable continuous page repainting为了获得关于页面重绘率的一些读数.
这是一个健康的阅读,在我的页面区域响应和顺利:
这是一个不健康的阅读(在问题区域),页面的响应速度很慢,滚动非常滞后:
页面表现完美,顶部有健康的重新绘制率(实际上活动最多的地方),并且在页面的较低区域执行非常(几乎停止).当我离开有问题的区域时,它会恢复到完美的性能.
更新:我完全禁用了Javascript,并获得了与之前相同的性能问题和读数.
\n\n\n我不知道CSS是根据用户在页面中的位置来生效的。这种行为是否决定了它的作用？
\n
确实如此，因为浏览器不想一次渲染页面上的所有内容。因此，页面上需要更多处理的点（如果有）将比需要较少处理的点慢。
\n\n\n\n\n是否存在可能导致性能不佳的冲突或不寻常的 CSS 定位、动画等？
\n
由于这是一个非常广泛的问题，我将比平时更广泛地回答它。这是一篇关于动画过程中发生的事情的文章，其中相当详细地介绍了幕后发生的事情。本质上它说有一个主线程和合成器线程；您希望大部分时间都留在合成器方面。这正是某些属性可以“廉价地设置动画”而无需浏览器做太多事情的原因。
\n\n我能想到的导致性能比平时更差的其他原因是，元素的动画或转换是否会影响不属于动画或转换一部分的其他元素的布局或状态。重要的是要防止动画或转换的元素影响其他元素，尤其是它们的布局，因为这会迫使它们返回主线程。
\n\n\n\n\nCSS 样式如何直接且一致地与页面性能相关联？具体来说，页面绘制时间。
\n
CSS 通过多种方式与页面性能相关。第一个是编译器读取 CSS 并将其应用到必要元素所需的时间。如果您正在处理大型样式表，那么编写高效的选择器尤其重要。你想尽可能走捷径。
\n\nCSS 效果表现的第二位是元素的定位方式。如果将 1,000 个元素放置在同一位置，那么无论有多少个元素可以看到或影响布局，它的性能自然会比在同一位置放置 1 个元素要差。这并不完全与 CSS 有关，但 CSS 定位决定了元素的位置，因此有多少元素会同时影响性能。更改元素的布局会将其放回到主线程中，除了重新绘制之外，这还迫使处理器进行更多思考。
\n\n您在问题中指定的第三个是绘画时间。您链接的文章对此进行了很好的阐述，解释了box-shadow 绘画时间的臭味。有很多关于 此 的报道，因为它确实存在。这是您的具体问题的本质；主要原因。您应该尽可能避免使用它们，尤其是大量使用。使用渐变可能会缩短绘制时间，因为它们更便宜。
第四个是 CSS 决定动画或过渡是使用 CPU 还是 GPU 渲染。虽然我们还没有这个功能，但Sara Soueidan在她关于该属性的文章will-change中对此进行了相当深入的研究。总而言之，CPU（中央处理单元）是计算机的大脑，渲染事物需要更长的时间，而 GPU（图形处理单元）渲染事物的速度更快，但无法“思考”那么多。目前我们使用诸如translate3d(0, 0, 0);或 之类的技巧translateZ(0px)来强制浏览器使用 GPU 渲染它，但将来我们将拥有该will-change属性。
正如 Sara 在文章中所说，不要让 GPU 处理所有事情，因为浏览器会尽可能地处理它，并且“一些更强大的优化可能最终会will-change使用大量machine\xe2\x80\x99s 资源，当像这样过度使用时可能会导致页面变慢甚至崩溃。”
\n\n
总之，CSS 可以通过增加绘制时间、改变元素布局方式、强制在 CPU 或 GPU 中处理过多元素以及编译器解释和应用 CSS 需要多长时间。
\n\nBoltClock评论时说得很对，
\n\n\n\n\n盒子阴影通常是大多数浏览器中渲染成本最高的阴影之一。几乎没有理由有这么大的传播 - 你不妨使用渐变或其他东西；）
\n
\n\n
如果您的页面或页面的一部分运行缓慢，最好进一步检查以找出正在重新绘制的内容（如果有）
\n