What are these texts?
I was studing and for me to have some real study done I need to write it down, this is a small collection of topics that I studied in the last few weeks.
Other links from the same study-pool:
Critical Rendering Path
The series of operations a browser performs to translate HTML, CSS, and JavaScript into visible pixels on the screen is known as the Critical Rendering Path (CRP). If we can improve that, our page will render more quickly.
The steps needed for the browser to render are:
- Document Object Model(DOM)
- CSS Object Model(CSSOM)
- Render Tree
- Layout
- Paint
1. Document Object Model (DOM)
When we make request to a server, we get a response in the form of an HTTP message, which is divided into three parts: the start line, the header files, and the body. The body can include any arbitrary binary data (pictures, movies, and audio), and/or text, but the start line and headers are both text-based.
After receiving the answer (HTML markup language), the browser must translate all of the markup into what is typically displayed on screens. The browser starts by digesting the HTML and constructing the DOM according to a clearly defined set of steps.
- Convert bytes to characters
- Identify tokens
- Convert tokens to nodes
- Build DOM Tree
The string of characters converted from the bytes (if needed) will create the HTML body of the page. Something like:
<html>
<head>
<meta ...
<title ...
<link ...
Which are converted into tokens by the tokenizer, creating an token structure, the example below are just a reference and not a real tokenized HTML.
StartTag:head
Tag:meta
Tag:link
EndTag:head Hello...
While the tokenizer is converting the text into tokens, another function takes these tokens and converts them to Node objects. The Document Object Model, or DOM, is a tree structure that captures the content and properties of HTML as well as all the relationships between the nodes.
2. CSS Object Model (CSSOM)
Therefore, the DOM just records the page's content and not its associated CSS. We need to create the CSS Object Model in order to integrate CSS. The way CSSOM is built is very similar to how DOM is built.
However, we are unable to use the same incremental technique (partially generated CSS tree) as we did when building the DOM in this situation. Let's assume that we used partial CSS when building our page, for example p {background:'red'}, after some other part of the CSS we reach p {background:'blue'}, this operation overrides the previous one. If an incremental technique were used, this nodes would have a wrong color applied.
As a result, the browser stops page rendering until it has finished receiving and processing all of the CSS.
CSS IS RENDER BLOCKING
It is important to note that,
JAVASCRIPT IS PARSER BLOCKING
Because whenever we see the script tag in our HTML markup, it prevents the DOM from being constructed. As JavaScript may attempt to affect the page's style, Javascript should only be used after CSSOM creation.
JavaScript execution and CSS block rendering are both examples of this. Certain scripts don't alter the DOM or CSSOM, therefore they shouldn't prevent rendering. We employ async for those scripts so that they are not hindered by CSSOM or DOM creation.
3. Render Tree
After the tree structure and the styles (DOM and CSSOM) are calculated. The tree is finally rendered with all the styles correct applied. The components with characteristics like display:none are ignored because it only records visible content.
4. Layout
We need to determine where and how each element is placed on the page now that our render tree has been constructed. This is the stage of layout. The browser will execute the layout step each time we alter the geometry (width, height, and position) of elements.
5. Paint
The visible page content can finally be transformed to pixels in the paint phase so that it can be shown on the screen. In this process, the vector (boxes or forms created during the layout step) is converted to the raster (combination of individual pixels to be displayed on screen). This conversion is carried out by the rasterizer.
In most cases, one surface is painted. However, the browser will occasionally create various surfaces known as layers that can each be painted into separately. Once it is finished, the browser correctly merges all of the layers into one layer and displays them on the screen. Composite Layers is the name given to this procedure.
Usually all of these procedures occurs on the CPU, after all the layers are then send to the GPU that will make the drawing on the browser viewport.
The hardware will display a new image or frame for the user to see whenever the screen undergoes any form of visual change, such as scrolling or animation. Most devices refresh the screen at a rate of 60 frames per second (Hz), which is the standard.
Therefore, if we have 1000ms for 60 frames, we only have 16ms to produce each frame.
We typically only have 10 milliseconds because the browser uses the remaining time for other tasks.
If the process takes more than that, we can say that the page is laggy or janky.
Blocking the render
Order or blocking
Javascript > Style > Layout > Paint > Composite
Understanding exactly which parts of the pipeline our code activates is crucial because on each phase we can create some overhang that could cause a lag or jank.
Top comments (0)