12 tips for speeding up DHTML

dhtml| Dynamic HTML (DHTML) at Microsoft? The introduction of 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 blocks of text, or they can access individual HTML by using the DHTML Object Model (English) or the Document Object Model (DOM) (in English)
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 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, the following starts 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. 　
　　　
The HTML parser is invoked when the innerHTML property is invoked. To improve performance, you can first create a string and then assign it to the innerHTML property.
　　　
Slow:
　　　
divupdate.innerhtml = "";
for (var i=0; i<100; i++)
{
divupdate.innerhtml = "This is a slower way!" ";
}
　　　
Fast:
　　　
var str= "";
for (var i=0; i<100; i++)
{
STR + + "because of the use of strings, this method is faster!" ";
}
divupdate.innerhtml = str;
　　　
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.
　　　
Slow:
　　　
var node;
for (var i=0; i<100; i++)
{
node = document.createelement ("SPAN");
Node.appendchild (document.createTextNode ("Using CreateText
Node ()));
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 insertadjacent Element (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.
　　　
Slow:
　　　
for (var i=0; i<100; i++)
{
Divupdate.insertadjacenthtml ("BeforeEnd", "using insert
Adjacenthtml () ");
}
　　　
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.
　　　
Slow:
　　　
var opt;
divupdate.innerhtml = "〈select id= ' selupdate '";
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 + + "";
divupdate.innerhtml = str;
　　　
Faster:
　　　
var arr = new Array (1000);
for (var i=0; i<1000; i++)
{
Arr[i] = "〈option〉" + i + "Item 〈/option〉";
}
divupdate.innerhtml = "〈select id= ' selupdate '" + arr.join () + "
";
　　　
Updating tables with the DOM
　　　
Using the DOM method to insert a table's rows and cells is more efficient than using the InsertRow (English) and insert cell (English) methods (part of the DHTML Table object model). 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. 　
　　　
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 in a behavior or standalone file 　
　　　
To make better use of the scripting Reuse feature, place common scripting actions in DHTML additional code or element behavior (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 behaviors that do not use the Viewlink (English) feature, consider using the lightweight (English) behavior feature in Internet Explorer 5.5 for more efficient code encapsulation. Also, if your scripting code is in a script (English) block, you get higher performance.
　　　
Do not use dynamic properties too much
　　　
Dynamic properties provide a way for Web authors to use 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
　　　
Data binding (English) is a powerful feature that enables you to bind the results of a database query or the contents of an XML data island to HTML elements on a Web 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. 　
　　　
Do not set the Expando property in the Document object
　　　
The expando attribute 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 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, make sure that you do not set them on the document (English) object. If you do this, the document must perform additional redo operations when you access the property.
　　　
　　 Tip 10: Set the Expando property on the window (English) object. 　
　　　
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 style (English) object of the element you want to change directly, rather than modifying the classname (English) property of the element or the StyleSheet (English) object associated with the class.
　　　
Tip 11: Modify the Style object directly when you change the appearance of the content. 　
　　　
Collapse the text range before finding the parent
　　　
The TextRange object represents a range of text that the user selects or retrieves from an HTML element, such as body (English). By calling the Parentelement method, you can identify the parent of a text range. For a complex text range, it is more efficient to invoke the collapse (English) method before calling the Parentelement method.
　　　
Tip 12: Collapse the text range before accessing the Parentelement method.