A set of techniques to speed up DHTML

Mark Davis
Microsoft Corporation
Summary: This article describes the significant performance impact of some of the 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 you can use the URL href=http://msdn.microsoft.com/workshop/author/om/doc_object.asp]dhtml object model [/url] (English) or URL href=http://msdn.microsoft.com/workshop/author/dom/domoverview.asp]w3c Document Object Model (DOM) [/url] (English) to access individual HTML elements. 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 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/ Insertadjacenthtml.asp]insertadjacenthtml[/url] (English) and [url href=http://msdn.microsoft.com/workshop/author/dhtml/ Reference/methods/pastehtml.asp]pastehtml[/url] (English) method, and [URL href=http://msdn.microsoft.com/workshop/author/ Dhtml/reference/properties/innerhtml.asp]innerhtml[/url] (English) and [url href=http://msdn.microsoft.com/workshop/ Author/dhtml/reference/properties/outerhtml.asp]outerhtml[/url] property. Tip 1: In a script function for HTML content to make changes. 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 the URL href=http://msdn.microsoft.com/workshop/author/dhtml/is called Reference/methods/settimeout.asp]settimeout[/url], 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 URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innertext.asp ]innertext[/url] property.


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.
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip2.asp] please show [/url]
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> This method is faster because of the use of strings! </SPAN> "; } divupdate.innerhtml = str;

For more information, see [url href=http://msdn.microsoft.com/workshop/author/dyncontent/content.asp] dynamic content [/url] (English).
Using innertext

DHTML object model through [URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innertext.asp] Innertext[/url] Property accesses the textual content of an HTML element, while the consortium DOM provides a separate subdocument node. Updates the contents of an element directly through the InnerText property, rather than invoking the DOM [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/ Createtextnode.asp]createtextnode[/url] (English) method is faster. Tip 3: Update the text content with the InnerText property.


The following example shows how to use the InnerText property to improve performance.
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip3.asp] please show [/url]
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, use [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp] Createelement[/url] (English) and [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/ Insertadjacentelement.asp]insertadjacentelement[/url] method to add elements faster than to call a 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.
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip4.asp] please show [/url]
Slow:
for (var i=0 i<100; i++) {divupdate.insertadjacenthtml ("BeforeEnd", "<SPAN> using insertadjacenthtml () </spa N> "); }

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 using the HTML text method, a large number of [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/option.asp] Option[/url] element added to [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/select.asp] Select[/url] is an exception to the situation in the English language. 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®[url href=http://msdn.microsoft.com/scripting/jscript/doc/jsmthjoin.htm]join[/ URL] method to perform the final connection of the OPTION element HTML text.
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip5.asp] please show [/url]
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 = "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 = "<OPTION>" + i + "item </OPTION>";} divupdate.innerhtml = "<select id= ' selupdate ' >" + arr.join () + "</SELECT>";
Updating tables with the DOM

To insert a table's rows and cells using the DOM method rather than using [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertrow.asp] Insertrow[/url] (English) and [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertcell.asp] Insertcell[/url] Method (part of the DHTML Table object model) is more efficient. Especially in the creation of large tables, the efficiency of the difference is more obvious. Tip 6: Use the DOM method to create a large table.


[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip6.asp] please show [/url]
Slow:
var row; var cell;  for (var i=0 i<100; i++) {row = Tblupdate.insertrow ();    for (Var j=0 j<10; J + +) {cell = Row.insertcell ();  Cell.innertext = "The first" + i + "row, the first" + j + "cell"; } }

Fast:
var row; var cell; var tbody = tblupdate.childnodes[0]; Tblupdate.appendchild (TBODY);  for (var i=0 i<100; i++) {row = Document.createelement ("TR");  Tbody.appendchild (row);    for (Var j=0 j<10; J + +) {cell = document.createelement ("TD");    Row.appendchild (cell);  Cell.innertext = "The first" + i + "row, the first" + j + "cell"; } }
Write once, use multiple times

If your Web site uses scripts to perform common operations, consider putting these features into separate files so that it can be reused by multiple web pages. Doing so will not only improve the maintenance of the code, but also keep the script file in the browser's cache so that it only needs to be downloaded locally once the user accesses the site. The same benefits can be obtained by placing commonly used style rules in separate files. Tip 7: Reuse scripts by putting common code into behavior or stand-alone files.


To better utilize scripting reuse, put frequently used scripting actions into DHTML-attached code or elements [url href=http://msdn.microsoft.com/workshop/author/behaviors/overview.asp] behavior [/url] (in English). Behavior provides an effective way to reuse scripts and build components that are accessed from HTML, and to extend the DHTML object model with your own objects, methods, properties, and events. For unused [url Href=http://msdn.microsoft.com/workshop/author/behaviors/overview/viewlink_ovw.asp]viewlink[/url] Behavior of the (English) feature, you can consider using the URL href=http://msdn.microsoft.com/workshop/author/behaviors/overview/in Internet Explorer 5.5 Elementb_ovw.asp#lightweighthtcs]lightweight[/url] Behavioral characteristics For more efficient code encapsulation. Also, if your scripting code is in a [URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/script.asp]script[/ URL] (in English) block, you will get higher performance.
Do not use dynamic properties too much

[url href=http://msdn.microsoft.com/workshop/author/dhtml/overview/recalc.asp] dynamic properties [/url] (English) for Web The author provides a method for using an expression as a property value. An expression is evaluated at run time and its resulting value is applied to the property. This is a powerful feature. This attribute can be used to reduce the number of scripts on a page, but it can have a negative effect on performance because the expression must be timed and often associated with other property values. This is especially true for positional attributes. Tip 8: Restrict the use of dynamic properties.


Data binding is effective

[url href=http://msdn.microsoft.com/workshop/author/databind/data_binding.asp] data binding [/url] (English) is a powerful feature that It enables you to bind the results of a database query or the contents of the [URL href=http://msdn.microsoft.com/xml/tutorial/author_island.asp]xml data island [/url] (English) to the Web The HTML element on the page. Instead of returning to the server to extract data, you can provide data sorting and filtering capabilities, as well as different views of the data. Imagine a Web page that displays company data as a line chart, bar chart, or pie chart, as well as a button that sorts data by office, product, or sales stage, and all of these features need to be accessed only once to the server. Tip 9: Use data binding to provide a rich view of client data.


For more information about data binding, see the following articles:
[url href=http://msdn.microsoft.com/workshop/author/databind/data_binding.asp] Data binding overview [/url] (English)

[url href=http://msdn.microsoft.com/workshop/author/databind/dude1103.asp] bound page data [/url] (English)

[url href=http://msdn.microsoft.com/workshop/author/databind/dude010499.asp] skewed, average, and de facto data binding [/url] (English)
Do not set the Expando property in the Document object

[URL Href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/expando.asp]expando[/url] (English) property can be added to any object. This property is useful for storing information within the current Wed page and provides another way to extend the DHTML object model. For example, you can assign a [i]clicked property] to a DHTML element, using this property to prompt the user which element has been clicked. When an event is raised, you can also use the Expando property to provide more contextual information to the event handler function. Regardless of how you use the expando property, remember not to do so in the URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_ Document.asp]document[/url] Set them on the object (English). If you do this, the document must perform additional redo operations when you access the property. Tip 10: In [url Href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp]window[/url] Set the Expando property on the (English) object.


[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip10.asp] please show [/url]
Slow:
for (var i=0; i<1000; i++) {var tmp;  Window.document.myProperty = "The first" + i + "item"; TMP = Window.document.myProperty; }

Fast:
for (var i=0; i<1000; i++) {var tmp;  Window.myproperty = "The first" + i + "item"; TMP = Window.myproperty; }
Avoid switching classes and style rules

Switching classes and style rules is a costly operation that requires recalculation and adjustment of the layout of the entire document. If your Web site uses style sheets to provide an alternate view of your content, consider modifying the URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/for the element you want to change directly. Objects/obj_style.asp]style[/url] object, rather than modifying the element's [url href=http://msdn.microsoft.com/workshop/author/dhtml/ Reference/properties/classname.asp]classname[/url] Property or URL href=http://msdn.microsoft.com/workshop/associated with a class Author/dhtml/reference/objects/obj_stylesheet.asp]stylesheet[/url] (English) object. Tip 11: Modify the Style object directly when you change the appearance of the content.


Collapse the text range before finding the parent

[URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp] Textrange[/url] object represents a text area that the user selects or retrieves from an HTML element, such as a URL href=http://msdn.microsoft.com/workshop/author/dhtml/ Reference/objects/body.asp]body[/url] (English). by calling [URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/parentelement_1.asp] Parentelement[/url] method, you can identify the parent of a text range. For complex text ranges, call the URL href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/before calling the Parentelement method Collapse.asp]collapse[/url] (English) method is more efficient. Tip 12: Collapse the text range before accessing the Parentelement method.


For more information, see [URL href=http://msdn.microsoft.com/workshop/author/dyncontent/textrange.asp] using the TextRange object [/url] (English).
Other information

For additional tips on how to perform high-performance, see the following articles:
[url href=http://msdn.microsoft.com/workshop/author/perf/perftips.asp] Create a high-performance HTML page [/url] (English)

[url href=http://msdn.microsoft.com/workshop/author/dhtml/dude/dude100499.asp] More tips for performance [/url] (English)

[url href=http://msdn.microsoft.com/workshop/author/dhtml/dude/dude1201.asp] Frequent leap: Improving the performance of DHTML pages [/url] (English)


Mark Davis is a software design engineer for the Internet Explorer SDK documentation Group. He has been relentless in exploring Internet Explorer's latest technology, but sometimes goes to the north-west to relax.