css - CSS 如何对网页特定区域的页面绘制时间产生显着的负面影响？

Question

问题:

An invaluable article on the issue - JackPattishallJr 提到。

CSS 如何对网页特定区域的页面绘制时间产生显着的负面影响？

例如:

• 我不知道 CSS 会根据用户在页面中的位置生效。这种行为是否决定它确实如此？

• 是否存在可能导致性能不佳的冲突或异常 CSS 定位、动画等？

• CSS 样式如何直接且一致地与页面性能相关联？具体来说，页面绘制时间。

更新:我根据我刚刚做的两个测试编辑了问题和示例:

1. 在我的浏览器中没有启用 javascript 的情况下，性能不佳的问题(令人惊讶地)是一致的。

2. 移除问题区域的样式后，问题已解决(但不完全是，因为现在我的页面很难看)。

---

页面绘制时间问题

我注意到我的网页在页面上的一个特定区域表现不佳(滞后)。

为了研究这个问题，我启用了show paint rectangles 和enable continuous page repainting 以获得关于页面重绘率的一些读数。

Here's a Youtube video that I took to demonstrate the issue.

这是一个健康的阅读，在我的页面区域响应迅速且流畅:

这是一个不健康的阅读(在有问题的区域)，其中页面的响应速度很慢并且滚动非常滞后:

该页面表现完美，在顶部(实际上正在进行最多事件的地方)具有健康的重绘率，并且在页面的较低区域表现得非常糟糕(几乎停止)。当我滚动离开有问题的区域时，它会恢复到完美的性能。

更新:我完全禁用了 Javascript，并遇到了与以前相同的性能问题和读数。

Answer 1

感谢 JackPattishallJr. 的非常有用的评论，解决方案几乎简单得可笑，所以我录制了一个实时修复我的问题的视频。

Watch as the removal of a single character of CSS changes everything, instantly.

吸取教训。 切勿使用 2000 像素的框阴影。曾经。曾经。

---

How can CSS have a significantly negative affect on page paint time in a specific area of a web page?

CSS 样式与页面绘制时间有非常先进的直接关系，并且 this article by HTML5Rocks很好地解释和演示。

基本上，不同的样式特征(以及它们的某些组合)对页面渲染权重有非常严重的影响。通过使用 chrome 的 continuous page repainting 功能可以清楚地观察到这种行为。

如果有人能提供更详尽、更有见地的答案，请提供。

更新:我已经发布了一个赏金来宣传一个将更详细地解释这个问题的答案。虽然这篇文章解释得很好，但明天可能就不存在了，所以一个完整详细的答案总是更好(而且通常比源文章质量更高)。而且我既没有时间也没有必要的理解。