Shulou(Shulou.com)05/31 Report--

This article mainly explains "how JavaScript improves the running speed of DOM". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how JavaScript can improve the running speed of DOM.

As we all know, DOM operations are inefficient and not generally slow, and this is one of the common problems that cause performance problems. Why is it slow? Because the changes to DOM affect the user interface of the web page, redrawing the page is an expensive operation. Too many DOM operations will lead to a series of redrawing operations, and in order to ensure the accuracy of the execution results, all changes are performed synchronously in sequence. We call this process reflow, and it is one of the most expensive browser operations. Reflow operations mainly occur in several situations:

◆ when adding or deleting a DOM node.

When ◆ dynamically sets a style (such as element.style.width= "10px").

◆ when getting a size value that must be calculated, such as accessing offsetWidth, clientHeight, or other CSS values that need to be calculated (in DOM-compatible browsers, it can be obtained through the getComputedStyle function; in IE, it can be obtained through the currentStyle property).

The key to solving the problem is to limit the number of reflows caused by the DOM operation. Most browsers do not update DOM during the execution of JavaScript. Accordingly, these browsers put their operations on DOM into a queue and execute them sequentially after the JavaScript script has been executed. That is, during JavaScript execution, the user cannot interact with the browser until a reflow operation is performed. (the runaway script dialog triggers a reflux operation because it performs an operation that aborts JavaScript execution, and the user interface is updated.)

There are two basic ways to reduce backflow operations due to DOM modifications. * is to do as much preparation as possible before operating on the current DOM. A classic example is to add many DOM nodes to a document object:

For (var iTuno; I < items.length; iTunes +) {var item = document.createElement ("li"); item.appendChild (document.createTextNode ("Option" + I); list.appendChild (item);}

This code is inefficient because it modifies the current DOM structure in each loop. In order to improve performance, we need to reduce this number to *. In this case, * is to create a document fragment (document fragment) as a temporary container for those elements that have been created, and * add the contents of the container directly to the parent node at a time:

Var fragment = document.createDocumentFragment (); for (var iTuno; I < items.length; iTunes +) {var item = document.createElement ("li"); item.appendChild (document.createTextNode ("Option" + I); fragment.appendChild (item);} list.appendChild (fragment)

The adjusted code changes the structure of the current DOM only once, on a single line, and before that, we use document fragments to save those intermediate results. Because the document fragment does not have any visible content, such modifications do not trigger a reflow operation. In fact, the document fragment cannot be added to the DOM, we need to pass it as an argument to the appendChild function, and what we actually add is not the document fragment itself, but all the child elements below it.

At this point, I believe you have a deeper understanding of "JavaScript how to improve the running speed of DOM". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.