在 chrome 开发者工具 TimeLine 记录中重新计算布局绘制是什么意思？以及如何通过减少页面重新计算、布局和绘制的计数来提高页面性能？可以给点建议吗？谢谢
问问题
8948 次
3 回答
17
基本上，它们是您的浏览器，用于确定如何绘制您对页面所做的更改。
不要担心摆脱它们——如果你这样做了，你的网站将是静态的。但是... ...如果您想做一些对性能有用的事情，这确实与重排和重绘有关，那么将您的更改一起批处理。
假设你在 Twitter 找到了一份工作。你的工作是编写下一个版本的窗口，将每个 Twitter 帖子添加到屏幕上。
如果用户在他们的时间线中收到 250 条新推文，并且您在一个循环中添加每一条，一个接一个，浏览器将会变慢，因为每次添加一条，它都必须重新排列（移动为您添加的内容腾出空间）并重新绘制（样式化受添加影响的所有内容）。
一个更好的方法是在非 DOM 中构建新推文列表（即：使用当前实际上不在页面上的元素），然后一次添加它们。这减少了浏览器必须弄清楚一切需要去哪里的次数。
@Fabricio - 微优化可能不是很好，但是在一个循环中附加数百个浏览器元素，而不是同时将它们全部放入可以产生很大的不同。问问 Twitter 的人，他们不会费心缓存他们的 jQuery 对象。
于 2012-07-24T03:03:20.320 回答
6
这是触发页面布局（重排）的属性和方法的非常方便的列表：
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
您希望尽可能减少这些调用——尤其是在性能至关重要的情况下，例如在滚动事件期间，或在为大块内容设置动画时。
于 2012-11-15T05:41:36.123 回答
2
您可以使用“配置文件”选项卡和“审核”选项卡来检测代码的性能。这将为您提供有关您的代码的报告。
您可以通过多种方式减少页面重新计算、布局和绘制的计数。
- 一次添加多个孩子。
- 在更改元素之前隐藏元素。
- 给图像和其他元素高度和宽度。
于 2012-07-24T03:01:16.693 回答