Technology sharing ppt sorting (III): Web page rendering process

Time:2021-7-26

When I first started learning web development, I always had a question – when did the code I wrote work? Does the web page change every time I change the code? Of course, now it must be a wrong idea. After a period of work and learning, the path of code to page conversion becomes clearer and clearer in my mind, although “what happened between entering URL and web page display?” It’s an old question, but I still want to explain it according to my own understanding.

Browser architecture

First of all, let’s start with our most familiar friends. Web development is inseparable from the browser. I have the habit of opening many tabs when looking up data. Every time I open the task manager, I can see that Chrome browser is outstanding in terms of memory consumption. In addition, I can see a number in parentheses behind the application name, as shown in the figure below, but the tab I open is less than 23, So what is the rest of the process?

Technology sharing ppt sorting (III): Web page rendering process

Technology sharing ppt sorting (III): Web page rendering process

Let’s take a look at a classic diagram, which depicts the location and functions of four processes in Chrome browser:

  • Browser process: responsible for the forward and backward of the browser tab, the work of the address bar and bookmark bar, and handling some invisible underlying operations of the browser, such as network request and file access.
  • Renderer process: responsible for display related work in a tab, also known as rendering engine.
  • Plug in process: it is responsible for controlling the plug-ins used by web pages
  • GPU process: responsible for processing GPU tasks of the entire application

Technology sharing ppt sorting (III): Web page rendering process

The rendering process is special. Each tab requires a rendering process, which is also the core of web page rendering. We will describe these processes in detail in the next section. You can view these processes in the browser’s own process manager:

Technology sharing ppt sorting (III): Web page rendering process

Technology sharing ppt sorting (III): Web page rendering process

Since multiple browsers are often compatible and several browsers are often opened at the same time, even without careful comparison, it can be found that Chrome browser has relatively high memory consumption, while Firefox has relatively low memory consumption. This is because the tab process of Firefox and IE adopt a similar strategy: there are multiple tab processes, But it is not necessarily a page or a tab process. A tab process may be responsible for rendering multiple pages. In contrast, chrome uses the strategy of one page, one rendering process, and site isolation. Although the memory consumption is indeed high, this multi process architecture also has unique advantages:

  1. Higher fault tolerance. In today’s web applications, HTML, JavaScript and CSS are becoming more and more complex. These codes running in the rendering engine frequently appear bugs, and some bugs will directly lead to the collapse of the rendering engine. The multi process architecture makes each rendering engine run in its own process without affecting each other, that is, when one of the pages crashes and hangs, Other pages can also run normally without impact.
  2. Higher security and sandboxing. Rendering engines often encounter untrusted or even malicious code on the network. They will use these vulnerabilities to install malicious software on your computer. For this problem, the browser limits different permissions for different processes and provides a sandbox running environment for them to make them more secure and reliable
  3. Higher response speed. In the single process architecture, each task competes with each other to seize CPU resources, which slows down the browser response, and the multi process architecture just avoids this disadvantage.

Technology sharing ppt sorting (III): Web page rendering process

Web page rendering

Generally speaking, after entering the URL, there are five steps to complete the rendering of the web page:

  1. DNS query
  2. TCP connection
  3. HTTP request is response
  4. Server response
  5. Client rendering

First, if the domain name is entered, the browser will first find out whether there are corresponding settings from the hosts file. If not, visit the nearby DNS server for DNS query to obtain the correct IP address, and then make a TCP connection. After establishing the connection through three handshakes, start processing the HTTP request, and the server will return the response document after receiving the request, The browser that gets the response document starts to render the page using the rendering engine.

Technology sharing ppt sorting (III): Web page rendering process

The rendering engine mentioned here is the browser content we often talk about, such as WebKit and gecko.

rendering engine

The browser kernel is multi-threaded. Under the control of the kernel, each thread cooperates with each other to maintain synchronization. A browser is usually composed of the following resident threads:

  1. GUI rendering thread
  • Responsible for rendering browser interface, parsing HTML and CSS, building DOM tree and renderobject tree, layout and rendering, etc.
  • When the interface needs to be repainted or reflow is caused by some operation, the thread will execute
  • GUI rendering threads and JS engine threads are mutually exclusive. When the JS engine executes, the GUI thread will be suspended (equivalent to being frozen), and GUI updates will be saved in a queue and executed immediately when the JS engine is idle.
  1. JavaScript engine thread
  • Also known as the JS kernel, it is responsible for handling JavaScript scripts( (e.g. V8 engine)
  • The JS engine thread is responsible for parsing JavaScript scripts and running code.
  • The JS engine always waits for the arrival of tasks in the task queue and then processes them. There is only one JS thread running the JS program at any time in a tab page (renderer process)
  • Also note that Gui rendering threads and JS engine threads are mutually exclusive, so if JS execution takes too long, page rendering will be inconsistent and page rendering loading will be blocked.
  1. Timed trigger thread
  • The thread of setinterval and setTimeout in legend
  • The browser timing counter is not counted by the JavaScript engine (because the JavaScript engine is single threaded, if it is in the thread blocking state, it will affect the accuracy of timing)
  • Therefore, a separate thread is used to time and trigger the timing (after the timing is completed, it is added to the event queue and executed after the JS engine is idle)
  1. Event triggered thread
  • It belongs to the browser instead of the JS engine and is used to control the event loop (it is understandable that the JS engine itself is too busy and needs the assistance of another thread from the browser)
  • When the JS engine executes code blocks such as setTimeout (or other threads from the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), the corresponding task will be added to the event thread
  • When the corresponding event meets the trigger conditions and is triggered, the thread will add the event to the end of the queue to be processed and wait for the JS engine to process it
  • Note that due to the single thread relationship of JS, the events in these waiting queues have to be queued for processing by the JS engine (they will be executed when the JS engine is idle)
  1. Asynchronous HTTP request thread
  • After connecting, XMLHttpRequest opens a new thread request through the browser
  • When a state change is detected, if a callback function is set, the asynchronous thread will generate a state change event and put the callback into the event queue. It is then executed by the JavaScript engine.

These five threads perform their respective duties, but we still focus on GUI rendering:

Rendering process

  1. Process HTML tags and build DOM trees.
  2. Process CSS tags and build cssom tree
  3. Merge Dom and cssom into a rendering tree.
  4. Layout according to the rendering tree to calculate the geometric information of each node.
  5. Draw each node onto the screen.

Technology sharing ppt sorting (III): Web page rendering process

1. Construction of DOMTree (document object model)

Technology sharing ppt sorting (III): Web page rendering process

Step 1 (parsing): the HTML original bytecode read from the network or disk is converted into characters through the set charset encoding

Technology sharing ppt sorting (III): Web page rendering process

Step 2 (tokenization): parse the string into a token through the lexical analyzer. The token will indicate whether the current token is a start tag, an end tag, or a text tag.

Technology sharing ppt sorting (III): Web page rendering process

Step 3 (generate nodes and build DOM tree): the browser will connect tokens with each other according to the start tag and end tag recorded in tokens (tokens with end tag will not generate nodes).

Technology sharing ppt sorting (III): Web page rendering process

2. Construction of cssomtree (CSS object model)

When the HTML code encounters the < link > tag, the browser will send a request to obtain the CSS file marked in the tag (using inline CSS can omit the requested steps to improve the speed, but it is not necessary to lose modularity and maintainability for this speed). The content in style.css is shown in the following figure:

Technology sharing ppt sorting (III): Web page rendering process

After the browser obtains the data of the external CSS file, it will start to build the cssom tree like building the DOM tree. There is no special difference in this process.

Technology sharing ppt sorting (III): Web page rendering process

As can be seen from the figure, at first, the body has a style rule of font size: 16px. Then, based on the body style, each child node will add its own style rule. For example, span adds a style rule color: red. Because the style is similar to inheritance, the browser sets a rule:Cssomtree cannot be used until it is fully built, because the following properties may override the previous settings.For example, add a line of code P {font size: 12px} based on the above CSS code, and the previously set 16px will be overwritten to 12px.

What does it feel like to see here? Our page will not only contain HTML and CSS. JavaScript usually accounts for a large proportion in the page, and JavaScript is also an important factor causing performance problems. Here we explain the application of JavaScript in page rendering by answering the following questions.

Question: how to deal with JS files encountered during rendering?

Because JavaScript can manipulate DOM, if the interface is rendered while modifying these element attributes (that is, JS thread and UI thread run at the same time), the element data obtained before and after rendering thread may be inconsistent.

Therefore, in order to prevent unexpected rendering results, the browser sets the GUI rendering thread and the JS engine as mutually exclusive. When the JS engine executes, the GUI thread will be suspended, and the GUI update will be saved in a queue until the JS engine
The thread is executed immediately when it is idle.

In other words, if the HTML parser encounters JavaScript during DOM construction, it will pause DOM construction and transfer control to the JavaScript engine. After the JavaScript engine runs, the browser will resume DOM construction from the interrupted place.

Question: why does the browser sometimes report an error when accessing DOM in JS?

In the process of parsing, if a script or link tag is encountered, the resource will be loaded according to the address corresponding to Src. When the script tag does not set the async / defer attribute, the loading process is to download and execute all the code. At this time, the DOM tree has not been completely created. At this time, if JS attempts to access the DOM element behind the script tag, The browser will throw an error that the DOM element cannot be found.

Question: when talking about page performance optimization, I often emphasize that CSS files should be introduced in front of HTML documents and JS files should be introduced in the back. What is the reason for this?

Originally, DOM construction and cssom construction are two processes, and well water does not invade river water. Assuming that it takes 1s to complete DOM construction and 1s to complete cssom construction, a link tag is found when DOM is built for 0.2S. At this time, the time required to complete this operation is about 1.2s, as shown in the following figure:

Technology sharing ppt sorting (III): Web page rendering process

However, JS can also modify CSS styles and affect the final results of cssomtree. As we mentioned earlier, incomplete cssomtree cannot be used.

Question: what happens if JS tries to manipulate CSS styles when the browser has not finished downloading and building cssomtree?

We inserted a JS code into the middle of the HTML document and found this script tag during DOM construction. Assuming that this JS code only needs to execute 0.0001s, the time required to complete this operation will become:

Technology sharing ppt sorting (III): Web page rendering process

If we put CSS first and JS last, the construction time will become:

Technology sharing ppt sorting (III): Web page rendering process

It can be seen that although only a small section of JS code running only 0.0001s is inserted, different introduction times will seriously affect the construction speed of DOMTree.

In short, if a large number of dependencies are introduced between DOM, cssom and JavaScript execution, it may cause a significant delay in the browser’s processing of rendering resources:

  • When the browser encounters a script tag, the construction of DOMTree will be suspended until the script is executed
  • JavaScript can query and modify DOMTree and cssomtree
  • JavaScript will not execute until cssom is built
  • The position of the script in the document is important

3. Construction of rendering tree

When we generate DOM tree and cssom tree, we need to combine the two trees into a rendering tree.

Technology sharing ppt sorting (III): Web page rendering process

  • Each node in the render tree is called a renderobject.
  • Renderobject is almost one-to-one with DOM nodes. When a visible DOM node is added to the DOM tree, the kernel will generate a corresponding renderoject for it and add it to the render tree.
  • The visible DOM nodes do not include:

    1. Some nodes are not reflected in the render output(<html><script><link>…), will be directly ignored.
    2. Hidden nodes through CSS. For example, in the span node in the above figure, because an explicit CSS rule sets the display: none attribute on this node, it will be directly ignored when generating renderobject.
  • The render tree connects the browser typesetting engine and the rendering enginebridge, it isOutput of typesetting engine and input of rendering engine

4. Layout

So far, the browser has calculated which nodes are visible and their information and style. Next, we need to calculate the exact position and size of these nodes in the device viewport. This process is called “layout”.

The final output of the layout is a “box model”: all relative measurements are converted into absolute pixels on the screen.

Technology sharing ppt sorting (III): Web page rendering process

5. Rendering

When the layout event is completed, the browser will immediately send out the paint setup and paint events to start painting the rendering tree into pixels. The time required for painting is directly proportional to the complexity of CSS style. After painting, the user can see the final rendering effect of the page.

summary

It may take 1 ~ 2 seconds for us to send a request to a web page and obtain the rendered page, but the browser has actually done a lot of work mentioned above. Summarize the whole process of the browser’s key rendering path:

  1. Process HTML tag data and generate a DOM tree.
  2. Process CSS tag data and generate cssom tree.
  3. Combine the DOM tree with the cssom tree to generate a rendering tree.
  4. Traverse the rendering tree to start the layout and calculate the location information of each node.
  5. Draw each node to the screen.

Related issues

Defer and async

We also mentioned a small knowledge point above:When the async / defer attribute is not set in the script tag, the loading process is to download and execute all the code。 What is the difference between the two properties if they are set?

Technology sharing ppt sorting (III): Web page rendering process

The blue line represents JavaScript loading; The red line represents JavaScript execution; The green line represents HTML parsing.

  • Case 1<script></script>

Without defer or async, the browser will immediately load and execute the specified script, that is, it will load and execute the document elements without waiting for subsequent loading.

  • Case 2<script async></script>(asynchronous download)

The async attribute indicates that the JavaScript introduced is executed asynchronously. The difference between async and defer is that if it has been loaded, it will start execution — whether it is in the HTML parsing stage or after the domcontentloaded trigger. It should be noted that JavaScript loaded in this way will still block the load event. In other words, async script may be executed before or after the domcontentloaded trigger, but it must be executed before the load trigger.

  • Case 3<script defer></script>(delayed execution)

The defer attribute indicates that the execution of the imported JavaScript is delayed, that is, the HTML does not stop parsing when the JavaScript is loaded. The two processes are parallel. After the entire document is parsed and defer script is loaded (the order of these two things is independent), all JavaScript code loaded by defer script will be executed, and then the domcontentloaded event will be triggered.

Compared with ordinary script, defer has two differences:

  1. The parsing of HTML is not blocked when loading JavaScript files. The execution stage is put after the parsing of HTML tags is completed.
  2. When loading multiple JS scripts, async is loaded out of order, while defer is loaded in order.

Reflow and repaint

Technology sharing ppt sorting (III): Web page rendering process

We know that when a web page is generated, it will be rendered at least once. In the process of user access, it will continue to re render. Re rendering repeats step 4 (reflow) + step 5 (redraw) or only step 5 (redraw) in the above figure.

  • Redrawing: when some elements in render tree need to update attributes, these attributes only affect the appearance and style of the elements, but will not affect the layout, such as background color.
  • Reflow: when some (or all) of the render tree needs to be rebuilt due to changes in the size, layout, hiding, etc. of the elements

Reflow is bound to redraw, and redraw does not necessarily lead to reflow.Redrawing and reflow will occur frequently when we set the node style, and will also greatly affect the performance. The cost of backflow is much higher. Changing the child nodes in the parent node may lead to a series of backflow of the parent node.

Common attributes and methods causing backflow

Any operation that changes the geometric information of the element (the position and size of the element) will trigger reflow, adding or deleting visible DOM elements:

  • Element size change – margin, fill, border, width and height
  • Content changes, such as the user entering text in the input box
  • Browser window size changes – when the resize event occurs
  • Calculate the offsetwidth and offsetHeight properties
  • Set the value of the style property

How to reduce reflow and redraw

  • Replace top with transform
  • Replace display: none with visibility, because the former will only cause redrawing and the latter will cause reflow (changing the layout)
  • Do not use the table layout, a small change may cause the entire table to be rearranged
  • The faster the animation speed, the more reflow times. You can also choose to use requestanimationframe
  • CSS selectors match and search from right to left to avoid too many node levels
  • Set a node that is frequently redrawn or reflow as a layer, which can prevent the rendering behavior of this node from affecting other nodes. For example, for the video tag, the browser will automatically change the node into a layer.

Why is DOM slow to operate

Because DOM belongs to the rendering engine, and JS belongs to the JS engine. When we operate DOM through JS, in fact, this operation involves the communication between two threads, which is bound to bring some performance losses. Operating the DOM more than once is equivalent to communicating between threads all the time, and operating the DOM may also lead to redrawing backflow, which also leads to performance problems.

This is why when we use the vue.js framework, we feel that the fluency is significantly higher than that of traditional pages, because vue.js uses the virtual dom. If there are 10 actions to update the DOM in one operation, the virtual DOM will not operate the DOM immediately, but save the diff content updated in these 10 times to a local JS object, and finally attch the JS object to the DOM tree at one time, Then carry out subsequent operations to avoid a large amount of unnecessary calculation.

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]