js Data Storage and DOM Programming

Data storage

In javascript, the location of data storage will have a significant impact on the overall performance of the code.

There are four ways to store data: literal quantity, variable, array and object member.

To understand the access speed of variables, we must understand the scope. Because local variables are at the start of the scope, access is faster than accessing cross-domain-scoped variables (that is, outer-scoped variables other than the start). That is, the deeper the variable is in the scope, the slower the access speed. This means that the speed of accessing global variables is the slowest. Generally speaking, literals and local variables are accessed faster than array and object members.

Therefore, some common methods to improve data access speed are:

Avoid using the catch statement in with, try-catch because it changes the scope chain of the execution environment.

② Use nested objects as little as possible to avoid too deep nesting of objects.

③ Object members, array items and cross-domain variables that often need to be accessed can be saved in local variables.

DOM programming

We know that operating DOM with javascript will affect performance, so why? This problem is "born".

Because DOM is a language-independent program interface for manipulating XML and HTML documents, client script programming mostly deals with the underlying documents. Therefore, the recommended practice is to operate DOM as little as possible.

There are 1 tips:

If you need to access an DOM node multiple times, use local variables to store its reference.

Handle the HTML collection with care because it links to the underlying document in real time.

For example:

var divs= document.getElementsByTagName('div');
for(var i = 0;i < divs.length; i++){
 document.body.appendChild(document.creatElement('div'))
}

This is an infinite loop because divs. length is incremented each iteration, reflecting the current state of the underlying document.

Therefore, when we need to traverse an HTML collection, we can cache the length before using it. If it is a collection to be manipulated frequently, you can copy the whole collection into an array.

③ Use a faster API

For example:

childNodes -> children
childElementCount -> childNodes.length
firstElementChild -> firstChild
lastElementChild -> last Child
getElementByTagName ->querySelectorAll

④ Pay attention to redrawing and rearrangement

1. Most browsers optimize the rearrangement process by queuing modifications and executing them in batches because of the computational cost of each rearrangement.

The operation of getting layout information will cause queue refresh, as follows:

offsetTop, offsetLeft, offsetWidth, offsetHeight,
scrollTop, scrollLeft, scrollWidth, scrollHeight,
clientTop, clientLeft, clientWidth, clientHeight,
getComputedStyle

Because these properties or methods need to return the latest layout information, the browser has to perform "pending changes" in the rendering queue and trigger a rearrangement to return the correct value.

2. Minimize redrawing and rearranging, merging multiple modifications to DOM and styles, such as

var el = document.getElementById('mydiv');
el.style.margin = '5px';
el.style.padding = '2px';
el.style.borderLeft= '5px';

Above, three styles have been modified, each of which affects the geometry of the elements, resulting in three rearrangements in the worst case (most modern browsers are optimized for this, only triggering once)

Can be optimized to:

var el = document.getElementById('mydiv');
el.style.cssText = 'margin = '5px';padding = '2px';borderLeft= '5px';

3. When you need to perform a series of actions on the DOM element, you can do the following:

1) Remove elements from the document flow

2) Applying multiple changes to it

3) Bring elements back to the document

Specific methods include

Hide elements, apply modifications, and redisplay

Use the document fragment, build a subtree somewhere else, and then copy it back to the document

Copy the original element to a node that is separated from the document, and then replace the original element after modification

⑤ Absolute positioning and drag-and-drop agent are used in animation.

Use event delegates to reduce the number of event handlers.