DOM Access---High-performance JavaScript reading notes (3)

In the first chapter of JavaScript advanced programming, you divide JavaScript into three parts.

So the fact that the DOM and the BOM are two separate parts, the communication between them is through the function interface between each other, so that two separate parts of the function interface will inevitably bring performance loss . That's why everyone agrees that as little as possible to access and modify DOM elements (note what I'm saying here is access and modification, why include access, please continue to look down haha).

Here is a diagram to illustrate their respective roles.

1, when modifying the DOM element, we should try to use innerHTML instead of createelement again appendchild (because after testing, in all browsers use innerHTML faster)

2. Another way to modify DOM element content is to use Element.clonenode instead of document.createelement ()

3, when looping or traversing elements, try to use local variables to save HTML collections

What exactly is HTML collections, and what elements does it include?

The bottom line is that HTML collections is actually virtual, meaning that when the underlying document is updated, they are automatically updated. When each iteration accesses the length property of the HTML collections, it causes the collector to update, so the length property is cached in a variable and then used in the loop judgment condition.

4. ChildNodes is a collection, which is why many of the suggestions for improving JavaScript performance include "Using FirstChild and nextsibling instead of childnodes to traverse DOM elements" Use the diagram to speak (do not believe you can test, obviously testnextsibling faster than testchildnodes, especially when the amount of data is large when a glance can be seen)

5, if the browser uses the native Queryselectorall () method and the Queryselector () method to use them as much as possible (because their own implementation of their functions need to write very much code, There is one common feature of any programming language is that native methods are always best-performing.

6. Minimize Redraw and Reflow

In explaining this, by the way what is called redraw, what is called rearrangement

We all know that when a page is displayed in front of us, the fact that the browser downloads all the HTML tags, js,css, images, it parses the file and creates two internal structures, one for the DOM tree and one for the rendering tree. Browsers are arranged according to the DOM tree, and are drawn according to the rendering tree.

What kind of rearrangement would it be?

• Add or remove a visible DOM element
• Element position Change
• Element size change (because of margin, padding, border width higher properties)
• Content changes
• The initial page rendering
• browser window changes size

Understanding Reflow, redrawing is much simpler, in the literal sense is re-drawing, then under what circumstances will be redrawn, such as changing the style background, etc.

The access to these properties listed in will cause the render tree to be refreshed again resulting in reflow, preferably reducing the number of queries on these properties (layout information), assigning it to local variables when queried, and participating in calculations with local variables.

Let's look at a small example.

This is obviously a bad code, changed three times the style attributes, causing the browser to rearrange three times. One way to improve efficiency is to rearrange it only once. Look at the code below and you'll see.

Or a method that uses the class name

When you need to modify multiple elements in the DOM tree, it is best to reduce reflow and redraw by following these steps

• Remove this element from the document stream
• Apply multiple changes to it
• Bring elements back to the document

There are three ways to remove elements from the document stream

• Hide an element, modify it, and then display it
• Use a document fragment to create a subtree outside of the saved Dom and then copy it to the document (this method is recommended because it involves a minimum number of DOM operations and rearrangement)
• Copy the original element to a node that is out of the document, modify the copy, and then overwrite the original element

Paste the code for the second scenario and hopefully you can use this method to improve performance.

        for(vari = 0; i < 1000; i++) {            varel = document.createelement (' P '); El.innerhtml=i;        Document.body.appendChild (EL); }        //can be replaced by:        varFrag =document.createdocumentfragment ();  for(vari = 0; i < 1000; i++) {            varel = document.createelement (' P '); El.innerhtml=i;        Frag.appendchild (EL); } document.body.appendChild (Frag);

If it is an animated element, it is best to use absolute positioning to keep it out of the flow of the document, so that changing its position will not cause the other elements of the page to Reflow

(This is all I want to say, I hope we can discuss it together!) )

DOM Access---High-performance JavaScript reading notes (3)