Measurement of reflection time and colors in WebKit

Question

I am developing a JavaScript / HTML-based user interface on embedded hardware with a weak processor and WebKit.

Performance is not perfect, and I want to profile the application, especially to synchronize reflow and repaint events, to get tough data about actual performance, and not subjective and changing opinions.

Timing using regular "getTime ()" before and after does not work, as WebKit re-arranges and redraws after the event handlers.

I tried profiling the application in Speed ​​Tracer, but the calculations are so cheap that reflow events do not even appear on the PC hardware. I think some kind of tool more focused on reflow / repaint might be useful though.

Any tips on how to get the data for this?

Answer 1

Doing something like getting the height of a document forces melt. Perhaps you can combine this with getTime ().

For instance:

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 reflow 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