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