A set of tips for accelerating DHTML

Mark Davis
Microsoft Corporation

Abstract:This article describes the significant impact of some DHTML functions on performance and provides some tips for improving DHTML page performance.

Directory

Introduction
Batch Process DHTML changes
Use innertext
Use Dom to add a single element
Extend the options in the select Element
Update a table with Dom
Write Once, use multiple times
Do not use dynamic attributes too much
Data Binding is very effective
Do not set the expando attribute in the Document Object
Avoid switching class and style rules
Collapse the text range before searching for the parent item
Other materials

Introduction

The introduction of Dynamic HTML (DHTML) in Microsoft Internet Explorer 4.0 allows 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, styles, and positioning, allowing Web users to experience rich interactive functions. The flexibility of DHTML makes it possible to implement your ideas in multiple ways. Understanding how the HTML analysis and display components of Internet Explorer process requests can help you determine the best way to complete your work. This article describes the significant impact of some DHTML functions on the performance and provides some tips for improving the page performance.

Batch Process DHTML changes

On DHTML web pages, the most effective way to improve performance is to improve the changes to HTML content on the pages. There are multiple ways to update web pages. It is very important to understand this. From the customer's feedback, web authors can apply HTML text blocks, or use DHTML Object Models (English) or W3C Document Object Models (DOM) (English) to access individual HTML elements. Whenever you change the HTML content, the HTML analysis and display components of Internet Explorer must reorganize the internal representation of the page, recalculate the Document Layout and document stream, and display these changes. Although the actual performance is determined by the content of the web page and your changes, these operations are costly. If you apply HTML text blocks instead of individual access elements, you must call the HTML analyzer, which leads to additional performance overhead. Methods and attributes for accepting HTML text include insertadjacenthtml (English) and pastehtml (English), as well as innerhtml (English) and outerhtml (English) attributes.

Tip 1:Modify the HTML content in a script function. If your design uses multiple event handlers (for example, moving the response mouse), you should make changes in a centralized manner.

Another important fact of HTML analysis and display components is that once the script returns control (for example, when the script event processing function exits, or when the setTimeout (English) method is called ), this component recalculates the layout and displays the web page. Now you know how Internet Explorer handles changes. The following describes how to improve the performance of web pages.

Tip 2:Create an HTML string and make one change to the document, instead of making multiple updates. If HTML content is not necessary, consider using the innertext attribute.

In the following example, you can set a method with a low speed.InnerhtmlThe HTML analyzer is called for all attributes. To improve performance, you can create a string and assign itInnerhtmlAttribute.

Show

Slow:

Divupdate. innerhtml = ""; for (VAR I = 0; I <100; I ++) {divupdate. innerhtml + = "<span> This is a slow method! </Span> ";}

Fast:

VaR STR = ""; for (VAR I = 0; I <100; I ++) {STR + = "<span> This method is fast because strings are used! </Span> ";}divupdate. innerhtml = STR;

For more information, see dynamic content (English ).

Use innertext

DHTML Object Model uses the innertext attribute to access the text content of HTML elements, while W3C Dom provides an independent sub-text node. Directly passInnertextUpdating attributes is faster than calling the DOM createtextnode method.

Tip 3:UseInnertextAttribute update text content.

The following example shows how to useInnertextAttribute to improve performance.

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 = "using innertext attributes"; divupdate. appendchild (node );}

Use Dom to add a single element

As mentioned above, the access method of HTML text will cause the HTML analyzer to be called, thus reducing the performance. Therefore, if you use the createelement (English) and insertadjacentelement (English) Methods to add elementsInsertadjacenthtmlFast method.

Tip 4:CallCreateelementAndInsertadjacentelementMethod Comparison callInsertadjacenthtmlFast method.

Batch Process DHTML updates and call onceInsertadjacenthtmlMethod can improve performance, but sometimes it is more efficient to directly create elements through Dom. In the following solution, you can try the two methods and determine which one is faster.

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 = "using insertadjacentelement ()"; divupdate. insertadjacentelement ("beforeend", node );}

Extend the options in the select Element

For the previous rule using the HTML text method, adding a large number of option (English) elements to select (English) is an exception. In this case, useInnerhtmlProperty ratio callCreateelementThe collection of method access options is more efficient.

Tip 5:UseInnerhtmlAdd a large number of optionsSelectElement.

Use string connection operations to establishSelectThe HTML text of the element, and then use this technique to setInnerhtmlAttribute. For a large number of options, the string connection operation also affects the performance. In this case, create an array and call the Microsoft JScript join (English) method to executeOptionFinal connection of element HTML text.

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 = "item" + I + ";}

Fast:

VaR STR = "<select id = 'selupdate'>"; for (VAR I = 0; I <1000; I ++) {STR + = "<option> item" + I + "</option>" ;}str + = "</SELECT>"; divupdate. innerhtml = STR;

Faster:

VaR arr = new array (1000); For (VAR I = 0; I <1000; I ++) {arr [I] = "<option> item" + I + "</option>";} divupdate. innerhtml = "<select id = 'selupdate'>" + arr. join () + "</SELECT> ";

Update a table with Dom

Using the DOM method to insert rows and cells into a table is more efficient than using the insertrow (English) and insertcell (English) methods (part of the DHTML table object model. Especially when creating large tables, the efficiency difference is more obvious.

Tip 6:Use the DOM method to create a large table.

Show

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 = "row" + I + ", row" + 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 = "row" + I + ", row" + J + "cell ";}}

Write Once, use multiple times

If your web site uses scripts to perform some common operations, you can consider placing these functions in a separate file so that multiple web pages can be used repeatedly. This not only improves the code maintainability, but also keeps the script file in the browser cache, So that you only need to download it to the local device when the user accesses the site. You can also enjoy the same benefits by placing common style rules in an independent file.

Tip 7:By placing common code in a behavior or independent file, you can reuse the script.

To make better use of the script reuse function, place common script operations in the DHTML additional code or element behavior (English. Behavior provides an effective method for reusing scripts and creating components accessed from HTML, and allowing you to extend the DHTML Object Model with your own objects, methods, attributes, and events. For behaviors that do not use the viewlink (English) function, you can consider using the lightweight (English) behavior feature in Internet Explorer 5.5 for more effective code encapsulation. In addition, if your script code is in a script (English) block, it will achieve higher performance.

Do not use dynamic attributes too much

Dynamic attributes provide a method for web authors to use expressions as attribute values. When the expression is calculated at run time, the result value is applied to the attribute. This is a powerful feature. This feature can be used to reduce the number of scripts on the page. However, because the regular recalculation expression is required and the expression is often related to other attribute values, it will negatively affect the performance. This situation is particularly evident for positioning attributes.

Tip 8:Restrict the use of dynamic attributes.

Data Binding is very effective

Data Binding (English) is a powerful function that enables you to bind the database query results or XML data island (English) content to HTML elements on the web page. You do not need to return to the server to extract data, so you can provide data sorting and filtering functions, as well as different data views. 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, all these functions can be implemented only once the server is accessed.

Tip 9:Data Binding is used to provide a rich client data view.

For details about data binding, see the following article:

• Data Binding Overview)
• Bind page data (English)
• Skewed, average, and actual data binding)

Do not set the expando attribute in the Document Object

The expando attribute can be added to any object. This attribute is very useful. It can store information on the current wed page and provides another method to expand the DHTML Object Model. For example, you can specifyClickedAttribute to indicate which element the user has clicked. You can also useExpandoAttribute to provide more context information to the event processing function. No matter how you useExpandoAttribute. Do not set them on document objects. If you do this, when you access this attribute, the document must perform additional recalculations.

Tip 10:Set on window objectExpandoAttribute.

Show

Slow:

For (VAR I = 0; I <1000; I ++) {var TMP; too many Doc ument. myproperty = "item" + I + "; TMP = Invalid invalid Doc ument. myproperty ;}

Fast:

For (VAR I = 0; I <1000; I ++) {var TMP; window. myproperty = "" + I + ""; TMP = Window. myproperty ;}

Avoid switching class and style rules

Switching classes and style rules is a very costly operation. You need to recalculate and adjust the layout of the entire document. If your web site uses a style sheet to provide a backup view of the content, you can directly modify the style object of the element to be modified, rather than modifying the classname of the element) attribute or stylesheet (English) object associated with the class.

Tip 11:Directly modify the content appearanceStyleObject.

Collapse the text range before searching for the parent item

A textrange object indicates a text area selected by the user or retrieved from an HTML element, for example, body ). You can call the parentelement (English) method to identify the parent item in the text range. For complex text rangesParentelementYou can call the collapse method more efficiently.

Tip 12:When accessingParentelementFold the text range before using this method.

For more information, see use a textrange object ).

Other materials

For other tips for improving performance, see the following article:

• Create a high-performance HTML page)
• More tips for improving performance)
• Frequent advances: Improves DHTML page performance)

Mark Davis is a software design engineer in the Internet Explorer SDK documentation group. He has made unremitting efforts to explore the latest Internet Explorer technology, but sometimes he will relax in the northwest.