6 pictures let you understand the process of rendering web page by browser

Time:2021-6-15

By James Starkie
Translator: Xiaozhi
Source: dev

Recently, a Vue component is open source, which is not perfect enough. Welcome to improve it. I hope you can give a star support. Thank you.

GitHub address: https://github.com/qq44924588…

My idea: if I want to build a fast and reliable website, I need to really understand the mechanism of every step of browser rendering web page, so that I can optimize every step in the development process. This article is my learning summary of the end-to-end process at a higher level.

OK, no more nonsense. Let’s start. This process can be divided into the following main stages:

  1. Start parsing HTML
  2. Access to external resources
  3. Parsing CSS and building cssom
  4. Execute JavaScript
  5. Merge Dom and cssom to construct rendering tree
  6. Calculating layout and drawing

1. Start parsing HTML

When the browser receives the information of the page through the networkHTMLData, it immediately sets the parser toHTMLConvert toDocument object model (DOM)

Document object model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document, and defines a way to access the structure from the program, so as to change the structure, style and content of the document. DOM parses a document into a structure set composed of nodes and objects (objects containing attributes and methods). In short, it connects a web page to a script or programming language.

The first step in the parsing process is to decompose the HTML and express it asStart tagClosing mark andhisContent tagAnd then it can construct dom.

6 pictures let you understand the process of rendering web page by browser

2. Access to external resources

When the parser encounters external resources, such as CSS or JavaScript files, it extracts those files. The parser continues to run while loading the CSS file, which prevents page rendering until the resource is loaded and parsed (more on that later).

JavaScript files are slightly different – by default, the parser loads the JS file and parses it, while preventing parsing of HTML. Two attributes can be added to the script tag to alleviate this situation:deferandasync. Both allow the parser to continue running while loading JavaScript files in the background, but they perform differently. I will talk about it later, but in general:

deferIndicates that the execution of the file will be delayed until the parsing of the document is complete. If multiple files havedeferProperty, it will be executed in the order in which the pages are placed.

<script type="text/javascript" defer>

asyncIt means that the file will be executed immediately after loading, which may be executed during or after parsing, so the execution order of asynchronous scripts cannot be guaranteed.

<script type="text/javascript" async>

Preload resources

<link>ElementalrelThe property value of the propertypreloadCan let you in your HTML page<head>Some declarative resource acquisition requests are written in the element to indicate which resources are needed immediately after the page is loaded.

For this kind of instant resource, you may want to load it on the pageEarly stages of the life cycleIt starts to acquire, and preloads before the browser’s main rendering mechanism intervenes. This mechanism enables resources to be loaded and available earlier, and it is not easy to block the initial rendering of the page, so as to improve the performance.

<link href="style.css" rel="preload" as="style" />

6 pictures let you understand the process of rendering web page by browser

3. Parse CSS and build cssom

You may have known DOM for a long time, but rightCssom (CSS object model)Maybe I haven’t heard it many times.

CSS object model (cssom) is the mapping of all CSS selectors in tree form and the related properties of each selector. It has the root node, peer, descendant, child and other relationships of the tree. Cssom is very similar to the document object model (DOM). Both are part of the critical rendering path and a series of steps that must be taken to render a website correctly.

Building cssom with DOMRender treeThe browser uses the render tree to layout and draw the web page in turn.

Similar to HTML files and DOM, when loading CSS files, they must be parsed and converted into trees – this timeCSSOM. It describes all the CSS selectors on the page, their hierarchies and properties.

CSSOMAndDOMThe difference is that it cannot be built incrementally becauseCSSRules can cover each other at different points because of their specificity.That’s why CSS blocks renderingBefore parsing all CSS and building cssom, the browser cannot know where each element is on the screen.

6 pictures let you understand the process of rendering web page by browser

4. Execute JavaScript

Different browsers have different JS engines to perform this task. From the perspective of computer resources, parsing JS may be an expensive process, which is more expensive than other types of resources. Therefore, optimizing JS is so important to achieve good performance.

Loading events

When the loaded JS and DOM are fully parsed and ready, it will emitdocument.DOMContentLoadedevent. For any script that needs to access the DOM, such as operating in some way or listening for user interaction events, it is a good practice to wait for this event before executing the script.

document.addEventListener('DOMContentLoaded', (event) => {
    //It's safe to access dom
});

When all other content (such as asynchronous JavaScript, images, etc.) has finished loading, thewindow.loadevent.

window.addEventListener('load', (event) => {
    //The page is now fully loaded
});

6 pictures let you understand the process of rendering web page by browser

5. Merge Dom and cssom to build rendering tree

Render treeyesDOMandCSSOMRepresents all the content that will be rendered to the page. This does not necessarily mean that all nodes in the rendering tree will be visually rendered, for example, will containopacity: 0orvisibility: hiddenAnd can still be read by screen readers and so on, whiledisplay: noneIt doesn’t include anything. In addition, such as<head>Tags that do not contain any visual information, such as, will always be ignored.

Like JS engine, different browsers have different rendering engines.

6 pictures let you understand the process of rendering web page by browser

6. Calculate layout and draw

Now that we have a complete rendering tree, the browser knows what to render, but doesn’t know where to render. Therefore, the layout of the page (that is, the location and size of each node) must be calculated. The rendering engine traverses the rendering tree from the top all the way down, calculating the coordinates of each node that should be displayed.

After that, the last step is to get the layout information and draw the pixels to the screen.

6 pictures let you understand the process of rendering web page by browser


Original text: https://dev.to/jstarmx/how-th…

It’s impossible to know the bugs that may exist after the code is deployed in real time. Afterwards, in order to solve these bugs, we spent a lot of time debugging logs. By the way, we recommend fundebug, an easy-to-use bug monitoring tool.

communication

The article is updated continuously every week. You can search “big change world” on wechat to read and urge for the first time (one or two articles earlier than the blog). This article is GitHub https://github.com/qq449245884/xiaozhi I have collected many documents and I have welcomed Star and perfect. You can review the test points and pay attention to the official account.welfareYou can see welfare, you know.

6 pictures let you understand the process of rendering web page by browser