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

Question

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

Answer 1

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

不要担心摆脱它们 - 如果你这样做,你的网站将是静态的.但是......如果你想要做的东西,IS的性能非常有用,这不都与回流和重新绘制,然后批量更改在一起.

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

如果用户获取他们的时间线250个新的鸣叫,你在其他以后添加每一个在一个循环中,一个浏览器会一路下滑放缓,因为每次添加一个,它会回流(左右移动的东西为你添加的东西腾出空间)并重新绘制(设置受添加影响的所有内容).

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

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

Answer 2

这是触发页面布局(重排)的非常方便的属性和方法列表:

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

您希望尽可能地最小化这些调用 - 尤其是在性能很关键的情况下,例如在滚动事件期间,或者为大块内容设置动画时.