Front-end knowledge: Weird techniques for web page rendering

[[138223]]

In fact, there are many articles about web page rendering, but the relevant information is scattered and not very complete. If we want to have a general understanding of this topic, we still have a lot of knowledge to learn. Therefore, web developer Alexander Skutin decided to write an article. He believes that this article will not only help beginners, but also be beneficial to advanced front-end developers who want to refresh their knowledge structure.

The translation is as follows:

Web page rendering must be done at a very early stage, even when the page layout is just finalized. Because styles and scripts have a critical impact on web page rendering, professional developers must know some tips to avoid performance problems in practice.

This article will not study the detailed mechanisms inside the browser, but propose some general rules. After all, different browser engines work differently, which will undoubtedly make developers' research on browser features more complicated.

How does the browser render the web page?

First, let's review what the browser does when rendering a web page:

Form a Document Object Model (DOM) based on HTML code from the server

Load and parse the style to form a CSS object model.

On top of the Document Object Model and the CSS Object Model, a render tree is created, which consists of a set of objects to be rendered (these objects are called renderers or render objects in Webkit, and "frames" in Gecko). The render tree reflects the structure of the Document Object Model, but does not include invisible elements such as tags or elements with display:none attributes. In the render tree, each text string is represented by a separate renderer. Each render object contains the corresponding DOM object, or text block, plus the calculated style. In other words, the render tree is a visual representation of the Document Object Model.

For each element on the render tree, calculating its coordinates is called layout. The browser uses a streaming method, laying out an element only needs one pass, but table elements need multiple passes.

***, the elements on the rendering tree are finally displayed in the browser, a process called "painting".

When a user interacts with a web page, or a script modifies the web page, some of the operations mentioned above will be repeated because the internal structure of the web page has changed.

Redraw

When changing the style of an element that does not affect the position of the element on the web page, such as background-color, border-color, visibility, the browser will only redraw the element once with the new style (this is called redrawing, or reconstructing the style).

Rearrange

Reflow or re-layout occurs when changes affect the text content or structure, or the position of elements. These changes are usually triggered by the following events:

DOM manipulation (element addition, removal, modification, or change of element order);

Content changes, including changes to text within form fields;

Calculation or change of CSS properties; adding or removing style sheets; changing properties of "classes"; manipulation of the browser window (zoom, scroll); pseudo-class activation (:hover).

How do browsers optimize rendering?

The browser tries to limit the repaint/refactor to the area of ​​the changed element. For example, for a fixed or absolute positioned element, the resize only affects the element itself and its children, whereas a resize of a statically positioned element will trigger a reflow of all subsequent elements.

Another optimization technique is that when running several pieces of JavaScript code, the browser will cache the changes and apply them in a single pass after the code is finished running. For example, the following code will only trigger a rebuild and repaint:

 var $body = $( 'body' );
 $body.css( 'padding' , '1px' ); // reflow, repaint  
 $body.css( 'color' , 'red' ); // repaint  
 $body.css( 'margin' , '2px' ); // reflow, repaint  
 // only 1 reflow and repaint will actually happen  

However, as mentioned before, changing an element's properties will trigger a forced reflow. This is what happens if we add a line to the code block above that accesses an element's properties.

 var $body = $( 'body' ); $body.css( 'padding' , '1px' ); $body.css( 'padding' ); // reading a property, a forced reflow $body.css('color', 'red'); $body.css('margin', '2px');  

As a result, the reflow occurs twice. Therefore, you should group operations that access element attributes together to optimize web page performance. (You can find a more detailed example in JSBin)

Sometimes, you have to trigger a forced reflow. For example, we have to assign the same property (such as left margin) twice to the same element. Initially, it should be set to 100px without animation. Then, it must be changed to 50px with a transition. You can study this example on JSbin now, but I will explain it in more detail here.

First, we create a CSS class with a transition effect:

 .has-transition { -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 execution continues: // our element that has a "has-transition" class by default var $targetElem = $('#targetElemId');   
 
 // remove the transition class  
 $targetElem.removeClass( 'has-transition' ); 
 
 // change the property expecting the transition to be off, as the class is not there  
 // anymore  
 $targetElem.css( 'margin-left' , 100 ); 
 
 // put the transition class back  
 $targetElem.addClass( 'has-transition' ); 
 
 // change the property  
 $targetElem.css( 'margin-left' , 50 );

However, this implementation will not work. All changes are cached and only executed at the end of the code block. What we need is a forced reflow, which we can achieve with the following change:

 // remove the transition class $(this).removeClass('has-transition');   
 
 // change the property  
 $( this ).css( 'margin-left' , 100 ); 
 
 // trigger a forced reflow, so that changes in a class/property get applied immediately  
 $( this )[ 0 ].offsetHeight; // an example, other properties would work, too   
 
 // put the transition class back  
 $( this ).addClass( 'has-transition' ); 
 
 // change the property  
 $( this ).css( 'margin-left' , 50 );

Now the code executes as expected.

Practical advice on performance optimization

Summarizing the existing information, I make the following suggestions:

Create valid HTML and CSS files and don't forget to specify the encoding of the document. Styles should be included in the tags and script codes should be added at the end of the tags.

Try to simplify and optimize CSS selectors (this optimization is almost universally ignored by developers using CSS preprocessors) and keep the nesting level to a minimum. Here is the performance ranking of CSS selectors (starting from the fastest)

1. Identifier: #id

2. Class: .class

3. Tag: div 4. Adjacent sibling selector: a + i 5. Parent class selector: ul > li 6. Universal selector: * 7. Attribute selector: input[type="text"] 8. Pseudo-classes and pseudo-elements: a:hover

You should remember that browsers process selectors from right to left, so the rightmost selector should be the fastest: #id or .class: div * {...} // bad .list li {...} // bad .list-item {...} // good #list .list-item {...} // good * 1. In your script code, reduce DOM operations as much as possible. Cache everything, including element attributes and objects (if they are reused). When performing complex operations, it is better to use "isolated" elements, which can be added to the DOM later (the so-called "isolated" elements are separated from the DOM and only stored in memory).

2. If you use jQuery to select elements, please follow the best practices for jQuery selectors.

3. To change the style of an element, modifying the "class" attribute is one of the effective methods. When performing this change, the deeper the DOM rendering tree is, the better (this also helps to separate logic from appearance).

4. Try to only animate elements that are absolutely or fixed in position.

5. Disable complex hover animations when using scrolling (for example, add an additional non-hover class in ). Readers can read an article about this issue.

For more details, you can also read these two articles:

1.How do browsers work?

2.Rendering: repaint, reflow/relayout, restyle