Shulou(Shulou.com)06/03 Report--

This article is to share with you about how HTML and CSS and JS become pages, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

We often write HTML, CSS and JavaScript, and after writing these, we will see the page in the browser, so what exactly does the browser do behind this? This article will reveal the answer!

Understanding the rendering principle of browsers is indispensable in our front-end development to a deeper level, which allows us to consider performance optimization from a deeper level and point of view.

Let's go to the text.

Process, thread

The browser assigns a thread "top-down, left-to-right" to parse and render the code in turn, so what are processes and threads, and what is the relationship between them?

Process

A process is an instance of a program running. When a program is started, the operating system creates a piece of memory for the program to store code, running data and a main thread that executes the task. Such a running environment is called a process.

Thread

A thread cannot exist alone, it is started and managed by the process. The thread is attached to the process, and the use of multi-thread parallel processing in the process can improve the operation efficiency.

The relationship between the two

1. The execution error of any thread in the process will lead to the collapse of the whole process.

2. Data can be shared between threads

3. When a process shuts down, the operating system reclaims the memory occupied by the process.

4. The content between processes is isolated from each other.

The rendering mechanism starts with HTML, CSS, and JavaScript

To understand the rendering principle of browsers, we should start with understanding HTML, CSS and JavaScrip. Let's take a look at a picture.

HTML (Hypertext markup language), as the name implies, consists of tags (tags) and text, each tag has its own meaning, and the browser will display the corresponding content according to the tag and text.

CSS (cascading stylesheet), which consists of selectors and properties, can change the style of HTML. For example, in the image above, we changed the color of span from blue to green.

JavaScript, we can do a lot of things through JS, such as modifying the style in the figure above.

Let's start to analyze the principle of rendering.

Rendering pipeline

Due to the complexity of the rendering mechanism, the rendering module is divided into many sub-stages. The input HTML goes through these sub-stages and is finally output as pixels. This process is called rendering pipeline.

According to the chronological order of rendering, the pipeline can be divided into several sub-stages: construction of DOM tree, style calculation, layout phase, layering, drawing, blocking, rasterization, and compositing.

Build a DOM tree

Since browsers cannot understand and use HTML directly, it is necessary to transform HTML into a structure that browsers can understand (DOM tree)

Schematic diagram of tree structure

The Construction process of DOM Tree

Let's analyze what kind of DOM tree will be built by the following code

Let's run the above code, and then type document in the browser console to see what effect it will have.

When we open it one level at a time, we will see the effect shown above. We can draw a DOM tree structure based on the effect of each level, as follows:

Next, let's try to modify the content using JS to see what has changed:

We can see that the text of "browser" becomes "chrome".

Let's see if the DOM tree has changed.

We see that the location of the "browser" has been changed to "chrome", so how to make the DOM node have the style?

Style calculation

Style calculation, as the name implies, is to calculate the specific style of each element in the DOM node. This stage is divided into three parts:

Convert CSS into a structure that browsers can understand

Convert the property values in the stylesheet to standardize them

Calculate the style of each node in the DOM tree

Source of CSS style

Link imports external style resources

The browser will open up a new thread and go to the server to get the corresponding resource files (without hindering the rendering of the main thread)

Style embedded Styl

Parse from top to bottom, and continue to parse the DOM structure after parsing. In real projects, if there is not much css code, or mobile projects, we should use embedded to reduce the request for http resources and improve the speed of page rendering.

Inline style

@ import Import

It is synchronous and does not open up a new thread to load the resource file, but allows the main thread to get it, which hinders the continued rendering of the DOM structure; only after the external style is imported and parsed will the DOM structure continue to be rendered

Convert CSS into a structure that browsers can understand

Just as the browser does not understand HTML, it does not understand CSS, so when the rendering engine receives the CSS file, it performs a conversion operation to convert the CSS text into a styleSheets structure that the browser can understand.

In HTML, enter document in the browser to view the structure of the html. In css, you can enter document.styleSheets to see the structure of css

Now that the structure is empty, let's add some styles to see the effect.

Convert the property values in the stylesheet to standardize them

Property value normalization is the conversion of all values into standardized calculated values that are easy for the rendering engine to understand. Let's take a look at the effect:

Before standardization

Body {font-size: 2em; color: black; font-weight: bold;.}

After standardization

Body {font-size: 16px; color: rgb (0,0,0); font-weight: 700;...} calculate the specific style of each node in the DOM tree

There are two CSS rules for style calculation: inheritance rules and cascading rules.

CSS inheritance rules

CSS inheritance is the style in which each DOM node contains a parent node. Let's take a look at how the following code applies to the DOM node

Document h2 {color: red;} div {color: blue;} span {font-size: 16px } based on the rendering principle of Nuggets browser, the child node of DOM tree will have the style of parent node, so we can draw a picture like this.

We can also open the console and see what we can see when we select the span tag.

From the figure above, we can see the style, inheritance process, etc., of an element. The userAgent style is the default built-in style in the browser, and will be used if we do not provide any style.

Style cascading rules

Cascading is at the core of CSS, a basic feature of CSS that defines an algorithm for merging attribute values from multiple sources.

The final output of the style calculation phase is the style of each DOM node and is saved in ComputedStyle. We can see the final calculation style of a DOM element through the console

Layout stage

Now we don't know the geometric position of the DOM element, so now we need to calculate the geometric position of the visible element in the DOM tree, which is called layout. There are two processes in the layout phase:

Create a layout tree

Layout calculation

Create a layout tree

Creating a layout tree means creating a tree that contains only visible elements. Let's take a look at the following code that creates a layout tree.

Document H2 {color: red;} div {color: blue;} div span {font-size: 16px;} div span:last-child {display: none In the process of building a DOM tree to build a layout tree, all invisible nodes in the DOM tree will not be included in the tree. The browser will traverse all the visible nodes in the DOM tree and add them to the layout; invisible nodes will be ignored, and the content under the head tag and the last span node under the div will not be in the layout tree. Let's take a look at this process diagram and feel it.

Layout calculation

Layout calculation is to calculate the coordinate location of layout tree nodes. The calculation process is extremely complicated.

Stratification

The rendering engine generates a dedicated layer for a specific node and a corresponding layer tree. This is because the page may contain a lot of complex effects, so we can open the console to take a look at the layering of the page.

We can see that the rendering engine divides the page into many layers, and these layers are superimposed in a certain order to form the final page.

So what are the sources of the layers?

1. Elements with cascading context attributes are promoted to a separate layer

The cascading context enables HTML elements to have a three-dimensional concept, and these HTML elements are distributed on the z-axis perpendicular to the two-dimensional plane according to the priority of their attributes. Which elements have cascading context attributes?

2. Places that need to be clipped will be created as layers

When we create a div with width and height, the text content may go beyond this area, and the rendering engine will use part of the cropped text content to display in the div area, for example

Document div {width: 100px; height: 100px; background: yellow; overflow: auto;} We often write `HTML`, `CSS` and `JavaScript`. After writing these, we will see the page in the browser, so what exactly does the browser do behind this? This article will reveal the answer! Understanding the rendering principle of browsers is indispensable in leading to a deeper level of front-end development, which allows us to consider performance optimization and other running results from a deeper level and perspective.

Let's open the layers of the console again to see the effect.

You can see that the rendering engine creates a separate layer for the text section.

If the node in the layout tree has a corresponding layer, the node is a layer. If not, the node belongs to the layer of the parent node, as shown below:

Layer drawing

After you create the layer tree, the rendering engine draws each layer in the layer tree. The rendering engine will decompose the layer drawing into many small drawing instructions, and then form a list of these instructions in order. We can open the layers in the console, select the document layer, and see the effect.

Rasterization operation

Rasterization is to convert blocks into bitmaps, and blocks are the smallest unit of rasterization. The rendering process maintains a rasterized thread pool, and the rasterization of all blocks is performed within the thread pool.

After the layer drawing list is ready, the main thread submits the drawing list to the compositing thread, and the drawing operation is done by the compositing thread in the rendering engine.

The compositing thread divides the layer into blocks, and then the compositing thread generates bitmaps first according to the blocks near the viewports (visible areas).

Synthesis and display

After all the blocks are rasterized, the compositing thread generates a command to draw the block (DrawQuad) and then submits the command to the browser process. The viz component in the browser process is used to receive DrawQuad commands, draw its page contents into memory, and finally display memory to the screen. At this point, we see the page.

Perfect the schematic diagram of rendering pipeline

According to the above description, we can draw such a picture.

I also found another picture on the Internet

Both images describe the rendering process of the browser.

This is how HTML, CSS and JS become pages. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.