在Chrome开发人员工具“时间线"记录中，“重新计算布局画图"是什么意思? [英] what does Recalculate Layout Paint mean in chrome developer tool TimeLine records?

问题描述

Chrome开发者工具时间线"记录中的重新计算布局画图"是什么意思?以及如何通过减少页面的重新计算"，布局"和绘画"的数量来提高页面性能?可以提出一些建议吗?谢谢

what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks

推荐答案

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

Basically, they're your browser figuring out how to draw the changes that you made to the page.

不用担心摆脱它们-如果这样做，您的网站将是静态的. 但是... ...如果您想做一些对性能有用的 IS ，而这与重排和重绘有关，则将更改汇总在一起.

Don't worry about getting rid of them -- if you did that, your site would be static. However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.

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

Lets say that you got a job at Twitter. And your job is to write the next version of the window that adds each twitter post to the screen.

如果用户在其时间轴中获得250条新推文，并且您一个接一个地添加一个新的推文，则浏览器将变慢，因为每次添加一个，它都必须重排(来回移动事物以为您添加的事物腾出空间)并重新绘制(设置受该事物影响的所有事物的样式).

If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).

一种更好的方法是将新推文列表构建为非DOM形式(即:使用当前不在页面上的元素)，然后一次将其全部添加. 这样可以减少浏览器确定一切所需去向的次数.

A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once. This cuts down on the number of times that a browser has to figure out where everything needs to go.

@Fabricio-微优化可能不是一个很好的选择，但是将数百个浏览器元素附加到一个循环中，而不是将它们全部同时放入，可能会产生很大的不同. 只是问问那些不愿意缓存其jQuery对象的Twitter家伙.

@Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference. Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.

这篇关于在Chrome开发人员工具“时间线"记录中，“重新计算布局画图"是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！