Critical Rendering Path (CRP) - How browser render webpages

Critical Rendering Path (CRP) - How browser render webpages

Bhavani Bolloju Bhavani Bolloju

Bhavani Bolloju

Frontend Developer | React.js Developer

发布日期: 2025年2月21日
+ 关注

When we load a webpage, the browser does a lot of work behind the scenes to convert the resources it receives from the server into what we see on the screen. This process is known as the Critical Rendering Path (CRP).

The CRP explains how the browser processes these resources and renders them onto the screen.

We can think of it like gathering and arranging all the ingredients in order before we actually start cooking.


The Five Steps of the CRP:

? Building the DOM(Document Object Model) → Parsing HTML into a structured tree of elements.

? Building the CSSOM(CSS Object Model) → processing CSS and building CSSOM tree.

? Building the Render Tree → Combining DOM and CSSOM

? Running Layout → Determining the exact position and size of each element on the page.

? Painting Pixels → Finally rendering everything on to the screen.

??The browser does all of this in such short time, and most of us have no idea about the complex process happening behind the scenes. Isn’t that fascinating?

Let’s take a closer look at each step in detail and understand what happens behind the scenes


? Processing HTML and Building DOM tree

  • The browser reads the HTML file and breaks it down into smaller pieces(tokens) called HTML tokens.
  • Each token is then converted into a node, and these nodes are structured into a tree like format called the DOM Tree.
  • The DOM tree structure represents the relationship between elements in the HTML document.
  • Each piece of information(text, comments, elements, attribute etc) in the HTML document is converted to a token, then to a node and finally become part of the DOM tree.

DOM tree is the browser’s internal representation of the HTML document, stored in its built-in memory.

? But Why is it important?? We can access the DOM nodes through JavaScript and modify the content on the screen dynamically.


? Processing CSS and building CSSOM tree

Just like how DOM represents the HTML document, the CSSOM tree represents the CSS styles applied to the HTML elements.

  • The browser reads the CSS file and converts each selector into a node.
  • Nodes are organized based on CSS rules(cascade, inheritance, specificity)
  • This process helps determine the computed styles(which are the final styles used for rendering).


? Building the Render tree

The DOM and CSSOM are combined together to create the Render tree. However, the Render tree only includes the visible nodes of the DOM tree, that is, only elements that take up space on the screen become part of the render tree(Elements with display:none; are excluded).

The browser then goes through each visible node of the render tree and applies the computed styles to determine how they should be displayed.

?? Question for you: Do you think an element with visibility: hidden; would be part of the render tree? ??

?? Answer: Yes, unlike display: none, elements with visibility: hidden; still take up space on the page so they become part of the Render Tree.

领英推荐


? Running layout on the Render tree

Render tree only identifies the visible nodes and their computed styles, but it doesn’t determine the position of each element on the screen.

The browser needs to figure out where on screen each node should be placed and how much space it occupies on the screen.

The browser might not know the dimension of the replaced elements(images), in that case browser reserves the placeholder space based on the default size or the available information and adjust when the actual size is known.

The layout process usually starts at the <body> element and then moves down to its descendant elements.

The first time when the browser determines the position and size of elements, it's called layout. If it later recalculates their positions due to new information that’s called reflow.

??Question for you: What happens If an image doesn’t have a defined width and height? ??

?? Answer: Browser doesn't know the image size before it loads. So, when the image is loaded, the browser recalculates the layout to fit its actual size. This may cause surrounding elements to shift, leading to layout shifts.


? Painting individual nodes to the screen

Once the layout is determined, the browser converts each node into pixels and renders them onto the screen. This is called painting.

Painting to the screen is the final stage of the critical rendering process

? First meaningful paint - This is the first time the browser renders something useful and relevant to the user (such as layout or content).


Handling External Resources

  • When parsing HTML, the browser sends requests for CSS and JavaScript files.
  • CSS file is considered as non-blocking, meaning they don’t stop the HTML parsing.
  • JavaScript files are render-blocking unless they include the defer or async attributes.
  • Modern browsers use preload scanners to look ahead and fetch resources earlier, improving speed and the performance.


Processing JavaScript file:

  • Browser parses the Script file into an Abstract Syntax Tree(AST)
  • JavaScript engine then takes this AST, generates byte code and executes it on the main thread.


Layers:

  • When the browser paints the screen for the first time, it promotes certain elements to their own layer(Elements such as <canvas>, <video>, or elements with CSS properties like opacity, will-change, and transform are promoted to separate layers).
  • Painting can break the elements of the layout tree into layers, allowing each layer to be drawn independently.
  • composing is the process of combining all the layers to create a final display.
  • Imagine if everything is in one layer, even small change can trigger a full-page repaint, causing reflow and recompositing all over again.

Layers allow browsers to repaint only parts that change, improving performance.

? Takeaway - Browsers promote elements to layers to improve repainting, but overusing layers can lead to performance issues due to high memory usage.

Browsers go through all these steps to render a webpage on the screen. Understanding each step helps us optimize performance, reduce layout shifts, and improve user experience.

Thanks for reading! ???? Let me know in the comments if I missed anything or if you have any questions.



要查看或添加评论，请登录

Bhavani Bolloju的更多文章

社区洞察

其他会员也浏览了