Talk about it from virtualDOM

We know that the best practice meaning of front-end development includes performance optimization,

Front-end performance optimization includes reducing DOM operations as much as possible

1. Performance

    1.1 Pay attention to scope

                Avoid global lookups

Completely replace var with let (avoid variable declaration hoisting) 

const instead of immutable variables

Avoid the with statement

O(1) constant The execution time is constant regardless of the number of values. Generally representing simple values ​​and values ​​stored in variables
O(log n) log The total execution time is related to the number of values, but it is not necessary to get every value to complete the algorithm. For example: binary search
O(n) linear The total execution time is directly related to the number of values. For example: iterate over all elements in an array

O(n 2 ) square The total execution time depends on the number of values, each of which is fetched at least n times. For example: Insertion sort

Once an object property is used multiple times, it should be stored in a local variable. The first access to the value will be O(n), but subsequent accesses
will be O(1), which saves a lot. For example, the previous code could be rewritten as follows:
var url = window.location.href;

var query = url.substring(url.indexOf("?"));

Avoiding Double Interpretation
There is a double interpretation penalty when JavaScript code wants to parse JavaScript. This happens when using the eval() function or the
Function constructor and passing a string parameter with setTimeout(). Here are some examples:
//Some code evaluation - avoid!!
eval("alert('Hello world!')");
//Create new function - avoid!!
var sayHi = new Function("alert( 'Hello world!')");
//set timeout - avoid!!
setTimeout("alert('Hello world!')", 500);
In all of the above examples, a string containing JavaScript code is parsed . This operation cannot be done in the initial parsing process
, because the code is contained in the string, which means that a new
parser . There is a non-negligible overhead in instantiating a new parser, so this code is much slower than direct parsing.
There are alternatives to these examples. There are very few cases where eval() is absolutely necessary, so avoid it if possible.

In this example, the code can actually be embedded directly in the original code

2 Minimize field updates

There is only one live update in this example, and it happens after all projects have been created. The document fragment serves as a temporary
placeholder for newly created items. Then use appendChild() to add all items to the list. Remember, when passing a document fragment to appendChild()
, only the child nodes in the fragment are added to the target, not the fragment itself.
Once the DOM needs to be updated, consider using document fragments to build the DOM structure before adding it to an existing document.

2. Using innerHTML

var images = document.getElementsByTagName("img"),
image,
i, len;
for (i=0, len=images.length; i < len; i++){
image = images[i];
//processing
}
this paragraph The code adds the image variable, which holds the current image. After this, there is no reason to access the
HTMLCollection of images again inside the loop.
When writing JavaScript, be sure to know when to return HTMLCollection objects so you can minimize access to
them . An HTMLCollection object is returned when:
 A call to getElementsByTagName() is made;
 An element's childNodes property is
obtained;  An element's attributes property is obtained;
 Special collections such as document.forms , document.images are accessed Wait