Question

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

性能不理想，我想对应用程序进行分析，特别是对重排和重新绘制事件的时间安排，以获得有关实际性能的硬数据，而不是主观和不断变化的意见。

使用常规“getTime（）”之前和之后的时间不起作用，因为WebKit会延迟重排并在事件处理程序之后重新绘制。

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

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

Answer 1

这些链接可能会有所帮助。 JP中的某个人已经找到了一种方法来为gecko做一个很好的回流可视化： 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

Answer 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);

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

2 个答案: