At least one layout (reflow) should occur for every user interaction. Ensure this by triggering user events in your test code with asynchronous callbacks.
Imagine you have some code that appends children to an element when a user clicks another element.
You want to see how fast the DOM is when a user clicks
#append-child many times. Don’t do this:
Instead, do this:
Consider the first example. Most modern browsers append 100 “hi”s at the same time. They gather DOM writes in synchrnous code, even if triggered by DOM events. Those browsers execute a layout after the code is completely evaluated.
The second example executes a layout every time our simulated user
#add-element element. It gives us a time we can compare to a
speed test of another implementation of the same functionality.
Some bad DOM performance occurs when a single user action triggers many
layouts. So you’ll want to account for all those layouts in your
measurement. Many layouts are executed if you call certain properties on
elements between statements that write to the DOM. For example, calling
clientHeight on an element between 2 DOM writes will trigger two
To determine the client height, the browser triggers a layout when
child.clientHeight is evaluated. Then the browser triggers another
layout when the code is done executing.