在Chrome开发人员工具TimeLine记录中重新计算布局绘图意味着什么？

Question

重新计算布局绘制在Chrome开发人员工具TimeLine记录中意味着什么？以及如何通过减少页面重新计算，布局和绘制计数来提高页面性能？可以提出一些建议吗？谢谢

Answer 1

基本上，他们是您的浏览器，弄清楚如何绘制您对页面所做的更改。

不要担心摆脱它们 - 如果你这样做，你的网站将是静态的。 但是......如果你想做一些 IS 对性能有用的东西，这与回流和重绘有关，那么就一起批量修改。

让我们说你在Twitter找到了一份工作。 你的工作就是编写下一个版本的窗口，将每个推特帖子添加到屏幕上。

如果用户在他们的时间轴中收到250条新推文，并且你逐个添加每个推文，那么浏览器就会慢下来，因为每次添加一个，它都必须重排（移动东西为你添加的东西腾出空间）并重新绘制（设置受添加影响的所有内容）。

更好的方法是在DOM之外一起构建新推文列表（即：使用实际上不在页面上的元素），然后一次性添加它们。 这减少了浏览器必须确定所需内容的次数。

@Fabricio - 微优化可能不是很好，但是在循环中附加数百个浏览器元素，而不是同时放入所有这些元素可以产生很大的不同。 只要问那些没有打算缓存jQuery对象的Twitter人员。

Answer 2

这是触发页面布局（重排）的非常方便的属性和方法列表：

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

您希望尽可能地减少这些调用 - 尤其是在性能至关重要的情况下，例如在滚动事件期间，或者为大块内容设置动画时。

Answer 3

您可以使用“配置文件”标签和“审核”标签来检测代码的性能。该会为您提供有关您的代码的报告。

您可以通过多种方式减少页面重新计算，布局和绘画的计数。

• 一次附加许多孩子。
• 在更改元素之前隐藏元素。
• 提供图像和其他元素的高度和宽度。