A set of techniques to speed up DHTML

Dhtml| Tip: This article describes the significant performance impact of some DHTML features and provides some tips for improving the performance of DHTML pages.

Directory

Brief introduction
Batch processing of DHTML changes
Using innertext
To add a single element using the DOM
Extending options in a SELECT element
Updating tables with the DOM
Write once, use multiple times
Do not use dynamic properties too much
Data binding is effective
Do not set the Expando property in the Document object
Avoid switching classes and style rules
Collapse the text range before finding the parent
Other information

Brief introduction
The introduction of dynamic HTML (DHTML) in Microsoft®internet Explorer 4.0 enables WEB authors and developers to use the new programming model. Since then, web authors have made full use of this powerful feature to provide dynamic content, style, and positioning, enabling web users to experience rich interactive functionality. The flexibility of DHTML makes it often possible to implement your ideas in a variety of ways. Understanding the HTML analysis of Internet Explorer and how the display component handles requests can help you determine the best way to complete your work. This article describes the significant performance impact of some of the DHTML features and provides some tips for improving page performance.

Batch processing of DHTML changes
On a DHTML Web page, the most effective way to improve performance is to improve the changes to the HTML content on the page. There are several ways to update Web pages, and it is important to understand this. From customer feedback, WEB authors can apply HTML text blocks, or they can access individual HTML elements by using the DHTML object Model (English) or the business-View Document Object Model (DOM). Whenever you change HTML content, the HTML analysis and display component of Internet Explorer must rearrange the internal representation of the page, recalculate the document layout and document flow, and display these changes. Although the actual performance is determined by the content of the Web page and the changes you make, these operations cost a lot more. If you apply an HTML text block instead of an individual access element, you must call the HTML parser, which results in additional performance overhead. Methods and properties that accept HTML text include the insertAdjacentHTML (English) and pastehtml (English) methods, as well as the InnerHTML (English) and outerHTML (English) properties.

Tip 1: Make changes to the HTML content in a script function. If your design uses more than one event handler (for example, in response to mouse movement), you should focus your changes.


Another important fact of the HTML parsing and display component is that once the script returns control (for example, when the script event handler exits, or when a method such as settimeout is invoked), the component recalculates the layout and displays the Web page. Now that you know how Internet Explorer handles changes, you will begin to improve the performance of your Web pages.

Tip 2: Create an HTML string and make a change to the document, rather than making multiple updates. If the HTML content is not necessary, consider using the innertext (English) attribute.


In the following example, the slower method calls the HTML parser each time the InnerHTML property is set. To improve performance, you can first create a string and then assign it to the InnerHTML property.

Please show

Slow:

divupdate.innerhtml = "";
for (var i=0; i<100; i++)
{
divupdate.innerhtml = "<SPAN> This is a slower way! </SPAN> ";
}

Fast:

var str= "";
for (var i=0; i<100; i++)
{
STR + + <SPAN> because of the use of strings, this method is faster! </SPAN> ";
}
divupdate.innerhtml = str;

For more information, see Dynamic Content (English).

Using innertext
The DHTML object model accesses the textual content of HTML elements through the innertext (English) attribute, while the consortium DOM provides a separate subdocument node. Updating the contents of an element directly through the InnerText property is faster than calling the DOM createTextNode method.

Tip 3: Update the text content with the InnerText property.


The following example shows how to use the InnerText property to improve performance.

Please show

Slow:

var node;
for (var i=0; i<100; i++)
{
node = document.createelement ("SPAN");
Node.appendchild (document.createTextNode ("Use createTextNode ()"));
Divupdate.appendchild (node);
}

Fast:

var node;
for (var i=0; i<100; i++)
{
node = document.createelement ("SPAN");
Node.innertext = "Use innertext attribute";
Divupdate.appendchild (node);
}

To add a single element using the DOM
As mentioned earlier, an access method that applies HTML text will result in a call to the HTML parser, which can degrade performance. Therefore, adding elements using the createelement (English) and Insertadjacentelement (English) methods is faster than calling the insertAdjacentHTML method once.

Tip 4: Calling the CreateElement and Insertadjacentelement methods is faster than invoking the insertAdjacentHTML method.


Batch processing of DHTML updates and call-once insertadjacenthtml methods can improve performance, but sometimes it is more efficient to create elements directly through the DOM. In the following scenario, you can try both methods and determine which one is faster.

Please show

Slow:

for (var i=0; i<100; i++)
{
Divupdate.insertadjacenthtml ("BeforeEnd", "<SPAN> use insertAdjacentHTML () </SPAN>");
}

Fast:

var node;
for (var i=0; i<100; i++)
{
node = document.createelement ("SPAN");
Node.innertext = "Use Insertadjacentelement ()";
Divupdate.insertadjacentelement ("BeforeEnd", node);
}

Extending options in a SELECT element
For the previous rule that uses the HTML text method, an exception is the case where a large number of OPTION elements are added to the SELECT (English). At this point, using the InnerHTML property is more efficient than calling the CreateElement method Access option collection.

Tip 5: Use InnerHTML to add a large number of options to the SELECT element.


Use the string concatenation operation to establish the HTML text for the SELECT element, and then use this technique to set the InnerHTML property. For a particularly large number of options, string concatenation operations can also affect performance. In this case, create an array and invoke the Microsoft Jscript®join (English) method to perform the final connection of the OPTION element HTML text.

Please show

Slow:

var opt;
divupdate.innerhtml = "<select id= ' selupdate ' ></SELECT>";
for (var i=0; i<1000; i++)
{
opt = document.createelement ("option");
SelUpdate.options.add (opt);
Opt.innertext = "The first" + i + "item";
}

Fast:

var str= "<select id= ' selupdate ' >";
for (var i=0; i<1000; i++)
{
STR + + "<OPTION>" + i + "Item </OPTION>";
}
STR + + "</SELECT>";
divupdate.innerhtml = str;

Faster:

var arr = new Array (1000);
for (var i=0; i<1000; i++)
{
Arr[i] = "<option&g