Shulou(Shulou.com)06/02 Report--

This article shows you how to optimize the performance of DOM operations, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

As we all know, when writing scripts in rich web applications, it is inevitable to deal with DOM, but frequent operations on DOM will lead to loss of performance, so how to optimize this performance bottleneck? In fact, this is also a required question for the front-end interview, generally speaking, there are roughly seven ways, which can be summed up from three angles, namely, accessing and modifying DOM elements; modifying DOM style; and responding to users through DOM event handlers. Let's take a closer look at the performance of optimizing DOM operations.

1. Find the optimization of elements. Because ID is unique and has original methods, using ID to find elements is the fastest, followed by finding elements based on classes and types, and finding elements through attributes is the slowest, so you should find elements through ID or classes as much as possible, and avoid looking for elements through attributes.

2. Reduce access and change DOM elements, including adding, modifying, and deleting DOM. Changing the DOM will cause the browser to render, which is quite slow, so unnecessary rendering should be avoided.

3. Reduce the style classes that change DOM, etc. By changing the style of DOM elements, classes can also cause browsers to render, so you should also reduce unnecessary operations.

4. When you batch modify DOM, remove the element from the document stream, apply multiple changes to it, and bring the element back to the document, so that redrawing and relayout can be minimized.

Specific methods:

(1) hide the element, modify it, and then display it.

(2) copy the original element to a node that is separated from the document, modify the copy, and then overwrite the original element.

5. Reducing iframeiframe takes a lot of time and blocking downloads, so it is recommended to use less.

6. The style is placed in header, and the script is placed in the style before closing the tag. In header, you can speed up rendering, and scripts can be placed before closing the tag to speed up downloads and inevitably block downloads.

7. Use event delegates to reduce the number of bound events. If you access the same DOM multiple times, you should cache the DOM with local variables.

The above is how to optimize the performance of DOM operations. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.