Browser rendering and web performance: Reflow

Most web operators focus on two big things when considering site performance: Network time and host time. If we’re particularly ornery, we might bring up SSL latency — the time it takes to negotiate encryption — or even service discovery delays such as DNS.

But with increasingly rich client interfaces, the time it takes for the browser to collect and display all of the content according to its style tags is an important source of delay.

Here are some examples of what a browser has to go through as it receives data (like a list of bullets) and then applies formatting (such as position, order, and alignment with other components.

These were found by DougT somewhere on Google Video. There are others (such as Wikipedia) that he shows on his blog.. He (and we) aren’t sure where they came from, although the original video references the Gecko rendering engine. Whoever you are, nice work!