When defining a page layout, you should optimize the presentation from the beginning. Styles and scripts play a very important role in page rendering. Professionals know some tricks to avoid some performance problems.
This article will not delve into the technical details of browsers, but provide some general principles. Different browser engines have different working principles, which makes the learning of a specific browser more complicated.
How does the browser render the page?
Let's talk about the general process of browser rendering pages:
Formed by HTML received from the server? Document object model
Load and parse styles to form a CSS object model.
Then DOM and CSSOM create a rendering tree, which is a collection of rendering objects (Webkit calls it "renderer" and "rendering object" respectively, and Gecko engine calls it "frame"). Except for invisible elements (such as head tag and some elements with display:none attribute), the rendering tree maps the structure of DOM. In the rendering tree, each text string is treated as an independent renderer. Each rendered object contains its corresponding DOM object (or text block) with calculation style. In other words, the rendering tree describes the intuitive representation of DOM.
For each rendered element, its coordinates will be calculated, which is called "layout". The browser uses a "flow method" that only needs to be processed once to lay out all the elements (the table needs to be processed multiple times).
Finally, the layout is displayed in the browser window. This process is called painting.
repaint
When you modify some styles (such as background color, border color, visibility) that don't need to change the positioning on the page, the browser will only redraw the new styles on the elements (this is called "redrawing" or "redefining styles" once).
rearrangement
Reorganization (or "re-layout") occurs when changes on a page affect the content, structure or element positioning of a document. Rearrangement is usually triggered by the following changes:
DOM operations (such as adding, deleting, changing or changing the order of elements).
? Changes in content, including changes in the text in the table.
? Calculate or change CSS properties.
? Add or delete style sheets.
? Change the Class property.
? Operation of browser window (resizing, scrolling window).
? Activate pseudoclasses (such as hovering state).
How does the browser optimize rendering?
The browser tries its best to limit the rearrangement process to cover only the areas of changed elements. For example, the size change of an element in absolue or fixed position only affects itself and its descendants, while doing the same for an element in static position will cause all the elements behind it to be rearranged.
Another optimization is that when running a piece of Jjavascript code, the browser will cache some modifications, and then execute these modifications at one time when executing the code.
For example, the following code triggers redrawing and rearranging:
var？ $body？ =? $(' body ')； ?
$body.css('padding '，？ 1px’)； ? //? Rearrange? Repaint?
$body.css('color '，？ Red'); ? //? Repaint?
$body.css('margin '，？ 2px’)； ? //? Rearrange? Repaint?
//? In fact, rearrangement and redrawing are only performed once. ?
As mentioned above, accessing the properties of an element will be forced to rearrange. If we add a line of code to the above code to read the attribute of the element, this will happen:
var？ $body？ =? $(' body ')； ?
$body.css('padding '，？ 1px’)； ?
$ body . CSS(' padding ')； ? //? Here, the attributes of an element are read once, and a forced rearrangement occurs.
$body.css('color '，？ Red'); ?
$body.css('margin '，？ 2px’)； ?
There are two rearrangements due to the above code. Therefore, in order to improve performance, you should say that the code for reading element attributes is organized together (see the code on JSBin for a detailed example).
In one case, a forced rearrangement must be triggered. For example, the same attribute of an element is modified twice (such as margin-left), the initial setting of 100px is not animated, and then the value is modified to 50px through animation. Specific examples can be seen, of course, I will talk about more details here.
Let's start with a CSS class with a transition:
. Has- transition? { ?
-Webkit.-Transition:? Left margin? 1s？ Relax;
-moz- transition:? Left margin? 1s？ Relax;
-o- transition:? Left margin? 1s？ Relax;
Transition:? Left margin? 1s？ Relax; ?
}?
Then implement:
//Our element has the "has-transition" attribute by default?
var？ $targetElem？ =? $(' # target elemid ')； ?
//Delete the class containing transition?
$ target elem . remove class(' has-transition ')；
//? When the class containing transition is gone, change the element attribute?
$targetElem.css('margin-left '，？ 100); ?
//? Then add it back to the class that contains the transformation.
$ target elem . add class(' has-transition ')； ?
//? Change element attributes?
$targetElem.css('margin-left '，？ 50); ?
The above implementation did not work as expected. All modifications are cached by the browser and will only be executed at the end of the above code. What we need is forced rearrangement, which can be achieved by making the following modifications:
//Delete the class containing transition?
$ (this). remove class(' has-transition ')； ?
//? Change element attributes?
$ (this). Css ('left margin',? 100); ?
//Trigger forced rearrangement, so that the changed class or property can be executed immediately. ?
$(this)[0]。 High; ? //? OffsetHeight is just an example, and other properties are also possible. ?
//? Then add it back to the class that contains the transformation.
$ (this). add class(“has-transition”)； ?
//? Change element attributes?
$ (this). Css ('left margin',? 50); ?
Now, this code runs as we expected.
Practical optimization suggestions
Summed up some useful information, I suggest the following:
? Create legitimate HTML and CSS, and don't forget to encode files. Styles should be written in the head tag, and script tags should be loaded at the end of the body tag.
? Try to simplify the optimization of CSS selectors (this optimization point is ignored by most developers who use CSS preprocessors). Keep nesting levels to a minimum. The following is the performance ranking of CSS selectors (from the fastest):
ID selector: #id
Class selector:? . classes
Label:? discrepancy
Adjacent sibling elements: a+i
Parent element selector:? Ul> Li
Wildcard selector:? *
Pseudo-classes and pseudo-elements:? A: Hover? You should remember that the browser handles selectors from right to left, which is why the right-most selector is faster -# id or. Class.
div？ *? {...}? //? Not good?
. List? Lee? {...}? //? Not good?
. List items? {...}? //? Okay？
# List? . List items? {...}? //? Okay？
Minimize DOM operations in scripts. Cache everything, including properties and objects (if they can be reused). When performing complex operations, it is best to operate an "offline" element (an "offline" element refers to an element that exists only in memory and is separated from DOM objects), and then insert this element into DOM.
If you use jQuery, follow the jQuery selector best practices.
To change the style of an element, modifying the "class" attribute is one of the most effective methods. The deeper the DOM tree is, the more efficient it is (which also helps to separate the representation from the logic).
As far as possible, only elements with absolute or fixed positions are animated.
When disabling some complicated scrolling? : hovering? Animation is a good idea (for example, adding a non-hovering class to the body tag).
For more details, you can read the following articles:
1. How does the browser work?
2. Rendering: redrawing, rearranging/rearranging, and redesigning styles.
I hope this article can help you!
Original link:? frontendbabel？ Translation:? Bole Online? -? Maeuser
Translation link:? /72692/