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

Question

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

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

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

我试过在Speed Tracer下分析这个应用程序，但计算量太小了，以至于回流事件甚至不会在PC硬件上显示出来。我猜一些更专注于回流/重绘的工具可能仍然有用。

有没有关于如何为此获得硬数据的提示？

Answer 1

像获取文档高度这样的操作会强制回流。也许你可以把它和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);

Answer 2

这些链接可能会有所帮助。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