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像素的盒子阴影。永远。永远。

---

  

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

CSS样式与页面绘制时间有非常高级的直接关系，this article by HTML5Rocks解释并演示了它。

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

如果有人能提供更详细，更有洞察力的答案，请做。

更新：我已经发布了一笔赏金来推广一个可以更详细地解释这个问题的答案。虽然文章解释得很好，但明天可能不存在，所以一个完全详细的答案总是好得多（并且通常比源文章更高质量）。我没有时间也没有必要了解。

Answer 2

  

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

这绝对是因为浏览器不想立即在页面上呈现所有内容。因此，需要更多处理的页面点（如果有的话）将比处理较少的点处更慢。

  

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

由于这是一个非常广泛的问题，我将比通常更广泛地回答它。这是一篇关于what happens during an animation的文章，其中详细介绍了幕后发生的事情。本质上它说有一个主线程和合成器线程;你想在大多数时间留在合成器一边。这正是certain properties能够廉价制作动画＆＃34;没有浏览器必须做太多。

如果元素的动画或转换可以影响不属于动画或转换的其他元素的布局或状态，那么我能想到的其他原因会导致比平时更糟糕的性能。防止动画或转换的元素影响其他元素，特别是它们的布局，这很重要，因为这会强制它们回到主线程上。

  

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

CSS以多种方式与页面性能相关。第一个是编译器读取CSS并将其应用于必要元素所需的时间。如果您特别处理大型样式表，Writing efficient selectors很重要。你想尽可能偷工减料。

CSS效果表现的第二位是元素的定位方式。如果将1,000个元素放置在相同位置，则自然会比在同一位置有1个元素更糟糕，无论可以看到多少元素或影响布局。这不是完全与CSS相关，但CSS定位决定了元素的位置，因此有多少会影响性能。更改元素的布局会将其重新放回主线程中，除了重新绘制之外，还会更多地考虑处理器的部分。

您在问题中指定的第三个是绘画时间。 article you linked很好地说明了这一点，并解释说 box-shadow 对于绘制时间感觉很糟糕 。这有lot's of reports因为它存在。这是您具体问题的实质;主要原因。你应该避免它们，特别是散装，尽可能。使用渐变可能会改善涂装时间，因为它们更便宜。

第四是CSS确定是使用CPU还是GPU渲染动画或过渡。虽然我们还没有这个功能，但Sara Soueidan中的her article on the will-change property深入研究了这一点。总之，CPU（中央处理单元）是计算机的大脑，渲染时需要更长的时间，而GPU（图形处理单元）在渲染时速度更快，但不能思考＆＃34;尽可能多。目前我们采用translate3d(0, 0, 0);或translateZ(0px)这样的技巧来强制浏览器使用GPU渲染它，但将来我们将拥有will-change属性。

正如Sara在文章中所说，不会让GPU处理所有内容，因为浏览器正在尽可能地处理它，并且＆＃34;一些更强大的优化可能与will-change绑定的最终结果是使用大量机器的资源，如果过度使用会导致页面速度变慢甚至崩溃。＆＃34;

---

总之，CSS可以通过增加绘制时间，改变元素布局方式，强制在CPU中处理太多元素，从而对页面在网页的特定区域中的绘制时间产生显着的负面影响。或GPU，以及编译器解释和应用CSS所需的时间。

当他评论时，

BoltClock被发现了，

  

框阴影通常是在大多数浏览器中渲染最昂贵的框阴影之一。几乎没有理由拥有如此大的传播 - 你可以使用渐变或其他东西;）

---

如果您的网页或部分网页运行缓慢，最好look into进一步查看正在重新绘制的网页

Answer 3

由于您已经解决过光栅化问题，请参阅以下有关css性能的更多信息。

1）选择器

以下是关于Github与CSS有关的一些问题的讨论，特别是选择器以及它们如何影响页面性能：http://vimeo.com/54990931 在此处滑动版本：https://speakerdeck.com/jonrohan/githubs-css-performance

如果你不小心，css预处理器可以生成一些非常长的选择器，例如这个选自Bootstrap＆＃39; s dist css：

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

2）SVG XML的多个实例

最近我尝试使用SVG XML绘制并填写星级评分＆＃39;小部件。这工作正常，直到我在页面中放置了大约20个实例，然后其中一些将在鼠标悬停时随机消失和/或闪烁。

3）在下拉菜单中使用背景图像。在单击弹出窗口之前，不会下载图像，这会为慢速连接的用户创建明显缓慢的加载时间。虽然无论您放置图像的总时间都完全相同，但用户在点击后下载时间时会发现更多。所以我在下拉菜单时要小心。