我们如何调查浏览器进行了多少次重排？答案

【问题标题】：how do we investigate how many times a browser is doing reflows?我们如何调查浏览器进行了多少次重排？
【发布时间】：2011-10-23 18:49:43
【问题描述】：

是否有网络开发人员功能/工具可以让我们知道浏览器进行了多少次重排？

基本上我想要一些反馈/信息。我不知道它会如何，但也许是某种显示时间线的性能图（类似于 Google 的Speed Tracer），所以我可以调查浏览器何时突然进行了大量的回流，所以我可以指出嘿，这是一个瓶颈，这里或某事必须有一个错误/错误的实现。

【问题讨论】：

您是否正在寻找诸如 Google Chrome 或 Firebug 中的开发者工具之类的东西？在 Chrome 的开发人员工具中，在时间轴选项卡上，您可以单击记录并查看加载/脚本/渲染所花费的时间。渲染的时间线会给你想要的东西吗？
@arunkumar 有点像这样，但我需要能够仅分析单个元素而不是整个页面。就像说你知道萤火虫，我们可以选择一个元素并查看一个特定元素的所有样式？那种东西，一旦选择了那个元素，我想只看到那个元素的渲染栏，忽略其余的。
“reflow”的意思是“redirect”，对吧？
@Gaurav 回流：stackoverflow.com/questions/6893032/…
我正在查看code.google.com/chrome/extensions/trunk/… 以查看您是否可以从开发人员工具中访问信息，但看起来关于正在呈现的元素的详细信息在那里不可用。在上面的链接中查看您之前的问题，一种选择可能是检查 Chrome 或 FF 的代码。找到与处理回流有关的代码，并将您自己的日志记录放在那里。可能有一些分析器允许您执行此操作，但我找不到。

【解决方案1】：

Chrome 和 Safari 在 Web Inspector 中有 Timeline 选项卡，您可以在其中查看浏览器进行的所有重排和重绘。
Firefox 有MozAfterPaint 事件。它可以帮助您了解页面的哪些区域以及浏览器何时重绘。 Firebug Paint Events add-on 在这里会有所帮助。它在 FireBug 控制台中显示重绘事件。

【讨论】：

我无法让 MozAfterPaint 工作。你知道chrome是什么意思吗： MozAfterPaint 事件暂时不再默认发送到网页内容；但是，它仍会发送到 chrome。 来源：developer.mozilla.org/en/…
我知道时间线选项卡但是我想要的是选择一个元素并能够查看该特定元素的重排（当然不是整个页面.. ）。真可惜.. Paint Events 插件仅适用于 FireFox 3
我怀疑这是可能的。我的意思是我不知道任何工具。我看到的唯一可能性是修改浏览器的代码以添加一些回流记录功能。
能否详细说明修改浏览器代码？我不知道你想说什么..
blog.mozilla.com/gen/2009/04/09/… - 在这里你可以找到一个人如何对 Firefox 回流过程进行可视化的粗略解释。他刚刚编译了自己的 ff 版本，能够记录所有回流。

【解决方案2】：

如果您有自定义构建的 Firefox，则可以跟踪回流信息。

【讨论】：

【解决方案3】：

在 2013 年末的某个时候，回流日志记录被内置到 Firefox 日志记录中。

在浏览器控制台（工具 > Web 开发人员 > 浏览器控制台）中，在 [CSS] 菜单中，选择“日志”

【讨论】：