在 WebKit 中测量回流和绘制时间答案

【问题标题】：Measuring Reflow and Paint times in WebKit在 WebKit 中测量回流和绘制时间
【发布时间】：2011-06-10 22:42:41
【问题描述】：

我正在为 CPU 和 WebKit 较弱的嵌入式硬件设计一个 JavaScript/HTML 驱动的用户界面。

性能并不理想，我想对应用程序进行分析，尤其是对回流和重绘事件进行计时，以获得有关实际性能的硬数据，而不是主观和不断变化的意见。

在前后使用常规的“getTime()”进行计时不起作用，因为 WebKit 将重排和重绘推迟到事件处理程序之后。

我曾尝试在 Speed Tracer 下分析应用程序，但计算成本太低，以至于回流事件甚至不会出现在 PC 硬件上。我想一些更专注于回流/重绘的工具可能仍然有用。

关于如何为此获取硬数据的任何提示？

【问题讨论】：

我只知道 dynatrace ajax 版本，但那只是 IE，我会对一个可以做到这一点的工具非常感兴趣 :)

标签： javascript html webkit profiling reflow

【解决方案1】：

这些链接可能会有所帮助。 JP 中的某个人找到了一种方法来为壁虎做一个很好的回流可视化： http://blog.mozilla.com/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/

不幸的是，这需要自定义 firefox 构建。这里的说明：https://developer.mozilla.org/En/Simple_Firefox_build

【讨论】：

谢谢，但我的需求是专门针对 WebKit 的，并且 Gecko 和 WebKit 之间的回流 AFAIU 并不完全相等。我正在为低功耗嵌入式硬件进行开发，因此获取实际渲染器的时序至关重要。

【解决方案2】：

执行诸如获取文档高度之类的操作会强制重排。也许你可以将它与 getTime() 结合起来。

例如：

var t1, t2;
t1 = new Date().getTime();

// Do some DOM manipulation

// Force reflow
document.body.offsetHeight;

t2 = new Date().getTime();
console.log(t2 - t1);

【讨论】：

这不能真正用于分析现有代码以找到需要优化的弱点
@Martin，确保它不是一个成熟的分析工具，但您至少可以对现有代码（我认为）发生的回流进行计时，这是 OP 特别提到的。
感谢您的提示。我认为它至少会让我走得更远一点。 :)
您可以使用 console.time 和 console.timeEnd API，因此您不必自己管理时间方面