CODEWITHSUNDEEP
javascripthtmlwebkitprofilingreflow
Rawler
Rawler

Reputation: 1620

Measuring Reflow and Paint times in WebKit

I'm designing a JavaScript/HTML-driven user interface on embedded hardware with weak CPU and WebKit.

Performance is not ideal, and I want to profile the application, especially timing the reflow and repaint events to get hard data on actual performance rather than subjective and changing opinions.

Timing using the regular "getTime()" before and after doesn't work, since WebKit defers reflow and repaint to after the event handlers.

I've tried profiling the app under Speed Tracer, but the computations are so cheap the reflow-events doesn't even show up on PC hardware. I guess some tool more focused on reflow/repaint might still be useful though.

Any tips on how to get hard data for this?

Upvotes: 5

Views: 1968

Answers (2)

helper
helper

Reputation: 21

These links might be helpful. Someone in JP has found out a way to do a nice visualization of reflow for gecko: http://blog.mozilla.com/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/

Unfortunatly, this requires a custom firefox build. Instructions here : https://developer.mozilla.org/En/Simple_Firefox_build

Upvotes: 2

David Tang
David Tang

Reputation: 93674

Doing something like getting the document height forces reflow. Maybe you can combine this with getTime().

For example:

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

// Do some DOM manipulation

// Force reflow
document.body.offsetHeight;

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

Upvotes: 1

Related Questions