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

This article is to share with you about which ways to achieve accelerated Javascript DOM operation optimization, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, do not say much, follow the editor to have a look.

Are you familiar with the methods of accelerating the optimization of Javascript DOM operations? when we develop Internet Rich applications (RIA), we often write some javascript scripts to modify or add page elements, which are ultimately done by DOM-- or the document object model, and our implementation will affect the response speed of the application.

Accelerate Javascript DOM operation optimization

When we develop Internet rich applications (RIA), we often write javascript scripts to modify or add page elements, which are ultimately done by DOM-- or the document object model, and the way we implement them will affect the response speed of the application.

The Javascript DOM operation causes the browser to reparse (reflow), which is a computational process for the browser to determine how the page elements are displayed. Reparsing is triggered by directly modifying the DOM, changing the CSS style of the element, and changing the window size of the browser. Reading the layout attribute of an element, such as offsetHeithe or offsetWidth, also triggers reparsing. Reparsing takes time to calculate, so the less reparsing triggers, the faster the application will be.

The Javascript DOM action is usually either to modify an element on an existing page or to create a new one. Here are two optimizations that roughly cover both modifying and creating DOM nodes to help you reduce the number of times you trigger browser reparsing.

Option 1: modify the DOM by switching the CSS class name

This scheme allows us to modify multiple style attributes of an element and its child elements at once and trigger reparsing only once.

Demand:

(emu Note: the original author obviously shorted his mind when he wrote here, putting the problem to be solved by the later Out-of-the-flowDOMManipulation pattern here, but it is easy to understand what the author really wants to describe from the demonstration code, so emu will not copy the original text.)

We now need to write a function to modify several style rules for a hyperlink. To be easy to implement, just change the properties corresponding to these rules one by one. But the problem is that every time you modify a style attribute, it results in a reparse of the page.

FunctionselectAnchor (element) {element.style.fontWeight='bold'; element.style.textDecoration='none'; element.style.color='#000';}

Solution:

To solve this problem, we can first create a style name and put all the style rules to be modified on the class name, and then we add the new class name to the hyperlink. you can add several style rules and trigger reparsing only once. Another advantage of this model is that it also separates performance from logic.

.selectedAnchor {font-weight:bold; text-decoration:none; color:#000;} functionselectAnchor (element) {element.className='selectedAnchor';}

This paper introduces the scheme 1 to accelerate the optimization of Javascript DOM operation. Let's take a look at scheme 2.

Option 2: modify DOM in the non-rendered area

(emu Note: the author shorted his mind here again and brought the introduction of DocumentFragmentDOMGeneration mode here in advance, so emu had to play it again.)

The previous solution solved the problem of modifying a hyperlink, which can be done when many hyperlinks need to be modified at a time.

Demand:

The requirement is that we write a function to modify the style name (className) attribute of all hyperlinks in the child elements of a specified element. To make this simple, we can accomplish the task by iterating through each hyperlink and changing their style name. But the problem is that every modification of a hyperlink results in a reparse.

FunctionupdateAllAnchors (element,anchorClass) {varanchors=element.getElementsByTagName ('a'); for (vari=0,length=anchors.length;i)

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.