Understanding Browser Rendering Process and Performance Optimization Techniques

The article begins with a preface emphasizing the importance of understanding why developers make certain choices, referencing the quote from "Web Performance: The Definitive Guide".

It then clarifies common misconceptions about browser rendering, such as the timing of DOM tree construction, the relationship between DOM, CSSOM, and render tree, and the impact of selector nesting on performance.

Next, it details the complete rendering pipeline, dividing it into network communication and page rendering. The network phase covers URL entry, DNS resolution (including browser cache, OS cache, ISP cache, root and TLD servers), TCP connection establishment (three‑way handshake), and HTTP request/response flow, describing the costs of each step.

The article compares HTTP/1.0, HTTP/1.1, and HTTP/2, explaining persistent connections, head‑of‑line blocking, pipelining limitations, and the advantages of HTTP/2’s binary framing, multiplexing, header compression, and server push.

It then explains HTML parsing (tokenisation and tree construction) and CSS parsing, including cascade rules, specificity calculation, and the role of rule trees in Firefox versus WebKit.

The construction of the render tree from the DOM and style trees is described, followed by layout, layer creation, rasterisation, and compositing, noting differences between WebKit and Gecko terminology.

Key performance concepts such as repaint, reflow, onload, DOMContentLoaded, first‑paint, and white‑screen time are defined.

Practical optimization recommendations are provided: reduce DNS lookups, reuse TCP connections, eliminate redirects, use CDNs, remove unnecessary resources, enable caching and compression, minimise HTTP headers, parallelise requests, and adopt HTTP/2 where possible.

Resource pre‑fetching techniques (preload, prefetch, subresource, prerender, preconnect, dns‑prefetch) are introduced with brief usage notes.

Guidelines for writing efficient CSS selectors are listed, advising against deep nesting, universal selectors, tag‑based ID selectors, and excessive descendant selectors.

JavaScript‑related optimisations include avoiding render‑blocking scripts (using async/defer), reducing DOM manipulations, leveraging JSON for data exchange, and isolating frequently updated nodes from the document flow.

Finally, the article shows how to use Chrome DevTools Audits: open the Audits panel, click run audits , and follow the generated performance suggestions such as lazy‑loading off‑screen images.