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

This article introduces the relevant knowledge of "what is the web front-end page rendering mechanism". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

browser

Before introducing the browser workflow, let's take a look at the infrastructure of mainstream browsers. The browsers introduced in this article are mainly open source Chrome,FireFox and some open source Safari. These are also several major browsers with a market share of *. Taking my blog website as an example, we can roughly see the proportion of browsers:

Browser infrastructure

The browser infrastructure mainly consists of the following seven parts:

1. User interface (User Interface): functional components that users see and interact with, such as address bar, back, forward button, etc.

two。 Browser engine (Browser engine): responsible for controlling and managing the rendering engine at the next level

3. Rendering engine (Rendering engine): responsible for parsing the content requested by the user (such as HTML or XML, the rendering engine parses HTML or XML and related CSS, and then returns the parsed content)

4. Networking: responsible for handling network-related transactions, such as HTTP requests, etc.

5.UI backend (UI backend): responsible for drawing browser components such as prompt boxes, the underlying of which uses the user interface of the operating system

6.JavaScript interpreter (JavaScript interpreter): responsible for parsing and executing JavaScript code

7. Data storage (Data storage): responsible for persistent storage of application data such as cookie and caching.

Browser kernel

The kernel used by major browsers is also different and can be roughly divided into the following categories:

Trident kernel: IE

Webkit kernel: Chrome,Safari

Gecko kernel: FireFox

The network

When a user visits the page, the browser needs to obtain the content requested by the user, which mainly involves the browser network module:

1. The user enters a domain name in the address bar, such as baidu.com,DNS (Domain Name System, Domain name Resolution system). The server finds the corresponding IP according to the entered domain name, and then initiates a request to the IP address.

DNS

two。 The browser obtains and parses the returned content of the server (HTTP response)

3. The browser loads HTML files and externally referenced files and pictures, multimedia and other resources contained in the files.

DNS pre-parsing (DNS prefetch)

Browser DNS resolution is usually fast and caches the resolution values of commonly used domain names. However, if a website involves multiple domain names, you need to resolve the IP address first when accessing each domain name. If you want to jump to or request other domain name resources as soon as possible, you can enable domain name pre-resolution. Browsers will resolve and declare the domain names that need to be pre-resolved in advance in their spare time, such as:

Multiple processes

We usually say that JavaScript execution is a single process, but the web part of the browser usually has several parallel processes open at the same time, but there will also be

The limit is generally 2-6.

Rendering engine and critical rendering path (Critical Rendering Path)

What the rendering engine does is to present the requested content to us. HTML,XML and image types are supported by default, and plug-ins need to be installed for other types of content such as PDF, but the display workflow of the browser is basically the same.

The rendering engine rendering process after loading into the HTML file through the network module is as follows, which is often referred to as the critical rendering path (Critical Rendering Path):

1. Build DOM tree (DOM tree): parse HTML documents from top to bottom to generate DOM node tree (DOM tree), also known as content tree (content tree)

two。 Build the CSSOM (CSS Object Model) tree: load the parsing style to generate the CSSOM tree

3. Execute JavaScript: load and execute JavaScript code (including inline code or external JavaScript files)

4. Build a render tree (render tree): generate a render tree (render tree) based on the DOM tree and CSSOM tree; render tree: a series of rectangles displayed sequentially on the screen with visual properties such as font, color, and size.

5. Layout: lay out each node of the node tree in the correct position on the screen according to the render tree

6. Painting: all nodes are drawn through the render tree, and the corresponding style is applied to each node. This process is done through the UI back-end module.

For a more user-friendly experience, browsers will present the content as quickly as possible, instead of waiting for all the contents of the document to arrive before parsing and building / laying out the rendering tree, but processing one part at a time and displaying it on the screen. this is why we can often see the content show from top to bottom when the page is loaded.

Flow chart

The flow of the Webkit rendering engine is shown below:

The flow of the Gecko rendering engine is shown below:

As shown in the figure above, the rendering process of Webkit browser and Gecko browser is roughly the same, except that:

The render tree (render tree) in the 1.Webkit browser corresponds to the frame tree (frame tree) in the Gecko browser, and the rendered object (render object) corresponds to the frame (frame)

The Layout process in 2.Webkit, called Reflow in Gecko, is essentially the same. Another meaning of reflow will be explained later-relayout.

In 3.Gecko, there is an extra layer of content pool (Content sink) between the HTML and DOM trees, which can be understood as the factory that generates DOM elements.

Single process

Unlike the network part, the multi-process rendering engine works in a single thread, which means that the rendering process is completed step by step.

Parse document (parser HTML)

Before detailing browser rendering of documents, you should understand how browsers parse documents: the order in which they are parsed, what to do with CSS and JavaScript, and so on.

Parsing order

Browsers scan parsed documents from top to bottom

Parse styles and scripts

The script may be because the DOM structure of the document is usually changed in the JavaScript script, so the browser parses, loads and executes the script synchronously. When the browser parses the document, when it parses to the tag, it parses the script (for unlinked JavaScript files, the contents of the file need to be loaded first, and then parsed), and then executed immediately, the whole process will block document parsing. The document will not be parsed until the script has been executed. That is, because the script is loaded and executed synchronously, it blocks document parsing, which explains why it is now generally recommended to put tags in front of tags rather than inside tags. Now HTML5 provides defer and async attributes to support delayed and asynchronous loading of JavaScript files, such as:

Improvement for the above script blocking document parsing, mainstream browsers such as Chrome and FireFox have some optimizations, such as when executing the script, start another process to parse the remaining documents to find and load other external resources to be downloaded (do not change the DOM tree of the main process, only optimize to load external resources).

Styles are different from scripts, and the browser's handling of styles does not block document parsing, probably because stylesheets do not change the DOM structure.

Stylesheets and scripts you may wonder if styles block the loading and execution of script files. Normally, it will not, but one problem is that we usually request style information in the script, but when the document is parsed, if the style has not been loaded or parsed, we will get an error message. FireFox browsers and Webkit browsers have different processing strategies for this problem:

When there are style files that have not been loaded and parsed, the FireFox browser blocks all scripts

Webkit browsers only block scripts that change the style attributes declared in the file.

Build a DOM tree

DOM, that is, the document object Model (Document Object Model), the DOM tree, that is, a tree structure composed of all the nodes in the document.

Suppose the browser gets the following HTML document returned:

Critical render path

Introduction to critical rendering paths

@ copyright2017

First, the browser parses the document from top to bottom to build a DOM tree, as follows:

Build a CSSOM tree

CSSOM, the CSS object Model (CSS Object Model), the CSSOM tree, is similar in structure to the DOM tree, except that style information is associated with each node separately.

The theme.css style is as follows:

Html, body {width: 100%; height: 100%; background-color: # fcfcfc;} .title {font-size: 20px;} .footer {font-size: 12px; color: # aaa;}

Build the CSSOM tree as shown below:

Execute JavaScript

We have already described the handling of scripts during document parsing, we know that script loading, parsing and execution will block document parsing, and in special cases, style loading and parsing will also block scripts. so the recommended practice is to put the tag in front of the tag.

Build a render tree (render tree)

The DOM tree and the CSSOM tree are built, and then the browser builds the render tree:

The rendering tree represents the visual display of a document, through which the browser draws the content of the document in the browser window and shows it to the user. It consists of a series of rectangular objects displayed sequentially on the screen. These rectangular objects have font, color and size, location and other visual style properties. For these moment objects, FireFox calls them frame, and Webkit browsers call them render objects (render object, renderer). Later, they are collectively called render objects.

The render tree node is called a rectangular object because each render object represents the CSS box of its corresponding DOM node, which contains geometric information such as size and location, and points to a style object that contains other visual style information.

Render Tree and DOM Tree

Each rendered object corresponds to a DOM node, but non-visual (hidden, non-occupying) DOM elements are not inserted into the render tree, such as the element or the declaration display: none Rendering object and DOM node is not a simple one-to-one relationship, a DOM can correspond to one render object, but a DOM element may also correspond to multiple render objects, because many elements contain more than one CSS box, for example, when text is wrapped, multiple line boxes will be generated, and these lines will generate multiple render objects If an inline element contains both block elements and inline elements, an anonymous block-level box is created that contains internal inline elements, and a DOM corresponds to multiple rectangular objects (rendered objects).

The render tree and its corresponding DOM tree are shown in the figure:

In the figure, the render tree viewport, namely the viewport, is the initial inclusion block of the document, and scroll represents the scrolling area. For more information, please see the visual formatting model of CSS (Visual Formatting Model).

Render trees do not contain tag elements that explicitly or implicitly display:none;.

Layout (Layout) or reflux (reflow,relayout)

After creating the render tree, the next step is Layout, or reflow,relayout. This process is to calculate the location and size of each rendered object based on the information of the rendered object in the render tree, and place it in the correct position of the browser window. Sometimes we will modify the DOM after the layout of the document is completed. At this time, we may need to rearrange the layout, which can also be called reflow. In essence, it is a layout process, and each rendered object has a layout or reflow method to achieve its layout or reflow.

Stream (flow)

HTML uses a flow-based approach to locate the layout, which is arranged from left to right and from top to bottom, as detailed in the CSS positioning mechanism.

Global layout and local layout

The layout of the render tree can be divided into global and local, that is, the whole render tree is rearranged, for example, when we change the size or direction of the window or modify the size or font size of the root element; the local layout can be to relayout a part of the render tree or a rendered object.

Dirty position system (dirty bit system)

Most web applications operate on DOM frequently, which means that it is often necessary to layout and reflow the DOM, and if only minor changes trigger the reflow of the entire render tree, this is obviously not good. In order to avoid this situation, the browser uses a dirty bit system, which means reflux is needed when only one rendered object has changed or the dirty bit value of a rendered object and its sub-rendered object is "dirty".

There are two kinds of dirty bit values that need to be laid out:

"dirty"-self-change, need to flow back

"children are dirty"-the child node is changed and needs to be reflowed

Layout process

Layout is a recursive process from top to bottom, from the outside to the inside, rendering the object from the root, that is, corresponding to the root element of the HTML document, and then rendering the object at the next level, such as the corresponding element, so that the geometric information (position and size) of each rendered object is calculated in turn.

Geometric information-location and size, that is, relative to the coordinates and dimensions of the window, such as the root rendered object, whose coordinates are (0,0), and the dimensions are viewports.

Size (the visual area of the browser window).

The layout process of each rendered object is basically as follows:

1. Calculate the width of this rendered object (width)

two。 Iterate through all the children of this rendered object, in turn:

a. Set the coordinates of the child rendered object

b. Determine whether the layout or reflux method of sub-rendered objects needs to be triggered, and calculate the height of sub-rendered objects (height)

3. Set the height of this rendered object: set its height based on the cumulative height of sub-rendered objects, the height of margin and padding

4. Set the dirty bit value of this rendered object to false.

Forced reflux

After the rendering tree layout is completed, when you manipulate the document again, change the content or structure of the document, or locate the elements, it will trigger backflow, that is, you need to relayout, such as requesting the "offsetHeight" style information of a certain DOM, and so on:

DOM operations, such as add, delete, modify, or move

Change content

Activate pseudo class

Access or change some CSS properties (including changing the stylesheet or element class name or using JavaScript operations)

Browser window change (scroll or size change)

$('body'). Css (' padding'); / / reflow $('body') [0] .offsetHeight; / / relow

Students who have experience in CSS3 animation development may have experience, as follows:

.slide-left {- webkit-transition: margin-left 1s ease-out;-moz-transition: margin-left 1s ease-out;-o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out;}

Then execute the following script:

Var $slide = $('.slide-left'); $slide.css ({"margin-left": "100px"}) .addClass (' slide-left'); $slide.css ({"margin-left": "10px"})

We will find that it has no effect. Why? Because the modification to margin-left does not trigger reflow, the change in the element margin-left value is cached if we force the reflow to be triggered in the middle:

Var $slide = $('.slide-left'); $slide.css ({"margin-left": "100px"}); console.log ($slide.css (' padding'); $slide.addClass ('slide-left'); $slide.css ({"margin-left": "10px"})

If you look at it again, it will achieve the desired effect.

Draw (painting)

* it is the paint stage or repaint stage. The browser UI component will traverse the render tree and call the paint method of the rendered object to display the content on the screen. It is also possible to modify the DOM later to redraw the rendered object, that is, redraw. The relationship between drawing and redrawing can refer to the relationship between layout and reflow.

Global and local rendering

Similar to the layout, painting is also divided into global and local rendering, that is, painting the entire render tree or some rendered objects.

Trigger redrawing

We already know that many actions may trigger redrawing, so when can redraw be triggered? usually, global or local redrawing is triggered when you change the visual style of an element, such as background-color,visibility,margin,padding or font color.

$('body'). Css (' color', 'red'); / / repaint $(' body'). Css ('margin',' 2px'); / / reflow, repaint

Page rendering optimization

When changing the visual information such as the font color of the document root element, it will trigger the redrawing of the entire document, while changing the font color of an element will only trigger the redrawing of a specific element; changing the location information of the element will also trigger the layout and redrawing of the element (and possibly its sibling or child elements). Some major changes, such as changing the font size of the document root element, trigger the relayout and redrawing of the entire document, based on which and as mentioned above, the following optimizations and practices are recommended:

The level of 1.HTML document structure should be as few as possible, with no more than six layers.

two。 Put the script back as far as possible, just put it in front.

3. A small amount of the first screen style is inline in the tag.

4. The level of style structure is as simple as possible

5. Minimize DOM operations in scripts and cache access to DOM style information as much as possible to avoid excessive triggering of backflow

6. Reduce the modification of element styles through JavaScript code, and try to manipulate styles or animations by changing class names.

7. Animation should be used on absolute or fixed positioning elements as far as possible.

8. Hide out of the screen, or try to stop the animation while the page is scrolling

9. Try to cache the DOM lookup, and keep the finder as concise as possible.

10. For websites involving multiple domain names, you can enable domain name pre-resolution

Example

When we visit a page, the browser renders the event log diagram as follows:

Initiate a request

Parsing HTML

Parsing style

Execute JavaScript

Layout

Draw

This is the end of the content of "what is the web front-end page rendering mechanism". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.