Abstract: This article explains the significant impact of certain DHTML features on performance and provides some tips to improve the performance of DHTML pages.
Table of contents
Introduction
Batch DHTML Changes
Use innerText
Adding a single element using DOM
Extend options in SELECT elements
Update tables with DOM
Write once, use multiple times
Do not use too much dynamic attribute
Data binding is very effective
Don't set the expando attribute in the document object
Avoid switching class and style rules
Collapse text range before searching for parent
Other information
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 features. The flexibility of DHTML makes it common to have multiple ways to implement your idea. Understanding how Internet Explorer’s HTML analysis and display components handle requests can help you determine the best way to get the job done. This article introduces the significant impact of certain DHTML features on performance and provides some tips to improve page performance.
Batch DHTML Changes
On DHTML Web pages, the most effective way to improve performance is to improve changes to HTML content on the page. There are many ways to update a web page, and it is very important to understand this. Judging from customer feedback, Web authors can apply HTML text blocks, or access individual HTML elements by using the DHTML object model (English) or the W3C document object model (DOM) (English). Whenever the HTML content is changed, the HTML analysis and display components of Internet Explorer must reorganize 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 are relatively expensive. If you apply HTML text blocks instead of individual access elements, you must call the HTML parser, which will result in additional performance overhead. Methods and attributes that accept HTML text include the insertAdjacentHTML (English) and pasteHTML (English) methods, as well as the innerHTML (English) and outerHTML (English) attributes.
Tips 1: Make changes to HTML content in a script function. If your design uses multiple event handlers (such as responding to mouse movement), changes should be made centrally.
Another important fact of HTML parsing and displaying components is that once the script returns control (for example, when the script event handler exits, or when methods such as setTimeout are called), the component recalculates the layout and displays the Web page. Now that you have learned how Internet Explorer handles changes, you will start to improve the performance of your web pages below.
Tip 2: Create an HTML string and make changes to the document once, rather than multiple updates. If HTML content is not necessary, consider using the innerText (English) attribute.
In the following example, the slower method calls the HTML parser every time the innerHTML property is set. To improve performance, you can create a string first and assign it to the innerHTML property.
Please show
slow:
= "";
for ( var i=0; i<100; i++ )
{
+= "<SPAN>This is a slower method!</SPAN>";
}
quick:
var str="";
for ( var i=0; i<100; i++ )
{
str += "<SPAN> Because of using strings, this method is faster!</SPAN>";
}
= str;
See Dynamic Content (English) for more information.
Use innerText
The DHTML object model accesses the text content of the HTML element through the innerText (English) attribute, while the W3C DOM provides an independent subtext node. It is faster to directly update the content of an element through the innerText attribute than to call the DOM createTextNode (English) method.
Tips 3: Use the innerText property to update the text content.
The following example shows how to improve performance using the innerText property.
Please show
slow:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
( ( "Use createTextNode()") );
( node );
}
quick:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
= "Use the innerText property";
( node );
}
Adding a single element using DOM
As mentioned earlier, applying the access method of HTML text will cause the HTML parser to be called, which will degrade performance. Therefore, adding elements using the createElement (English) and insertAdjacentElement (English) methods is faster than calling the insertAdjacentHTML method once.
Tips 4: Calling the createElement and insertAdjacentElement methods is faster than calling the insertAdjacentHTML methods.
Batching DHTML updates and calling the insertAdjacentHTML method can improve performance, but sometimes it is more efficient to create elements directly through 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++)
{
( "beforeEnd", "<SPAN> Use insertAdjacentHTML() </SPAN>" );
}
quick:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
= "Use insertAdjacentElement()";
( "beforeEnd", node );
}
Extend options in SELECT elements
An exception is the case where a large number of OPTION elements are added to SELECT (English) in the previous rule using HTML text methods. At this time, using the innerHTML attribute is more efficient than calling the createElement method to access the option set.
Tip 5: Use innerHTML to add a large number of options to the SELECT element.
Use the string concatenation operation to create the HTML text of the SELECT element, and then use this technique to set the innerHTML property. For particularly large numbers of options, string concatenation operations can also affect performance. In this case, create an array and call the Microsoft JScript® join (English) method to perform the final connection of the OPTION element HTML text.
Please show
slow:
var opt;
= "<SELECT ID='selUpdate'></SELECT>";
for (var i=0; i<1000; i++)
{
opt = ( "OPTION" );
( opt );
= "Things" + i +" item";
}
quick:
var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)
{
str += "<OPTION>" + i + " item</OPTION>";
}
str += "</SELECT>";
= str;
Faster:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr = "<OPTION>" + i + " item</OPTION>";
}
= "<SELECT ID='selUpdate'>" + () + "</SELECT>";
Update tables with DOM
Inserting rows and cells of a table using the DOM method 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 difference in efficiency is even more obvious.
Tips 6: Use the DOM method to create a large table.
Please show
slow:
var row;
var cell;
for (var i=0; i<100; i++)
{
row = ();
for (var j=0; j<10; j++)
{
cell = ();
= "Thread" + i + " row, " + j +" " cell";
}
}
quick:
var row;
var cell;
var tbody = [0];
( tbody );
for (var i=0; i<100; i++)
{
row = ( "TR" );
( row );
for (var j=0; j<10; j++)
{
cell = ( "TD" );
( cell );
= "Thread" + i + " row, " + j +" " cell";
}
}
Write once, use multiple times
If your Web site uses scripts to perform some common operations, consider putting these features into separate files so that they can be reused by multiple Web pages. This not only improves the maintenance of the code, but also keeps the script file in the browser's cache, so that it only needs to be downloaded locally once when the user visits the site. The same benefits can be achieved by placing common style rules in separate files.
Tips 7: Reuse scripts by putting common code into behavior or standalone files.
To better utilize script reuse function, place commonly used script operations into DHTML additional code or element behavior (English). Behavior provides an efficient way to reuse scripts and build components accessed from HTML and enables you to extend the DHTML object model with your own objects, methods, properties, 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 efficient code encapsulation. Additionally, if your script code is in a SCRIPT (English) block, you will get higher performance.
Do not use too much dynamic attribute
Dynamic attributes (English) provide Web authors with a way to use expressions as attribute values. The expression is calculated at runtime and its resulting value is applied to the property. This is a powerful feature. This feature can be used to reduce the number of scripts on the page, but because the expression must be recalculated regularly, and the expression is often associated with other property values, it has a negative impact on performance. This situation is particularly obvious for positioning attributes.
Tips 8: Restrict the use of dynamic attributes.
Data binding is very effective
Data binding (English) is a powerful feature that allows you to bind the results of a database query or the content of an XML data island (English) to the HTML element on the web page. You can provide data sorting and filtering capabilities, as well as different data views without returning to the server to extract data. Imagine a web page that displays company data as a line chart, bar chart or pie chart, and also has buttons to sort data by office, product, or sales stages, and all of these features are achieved by just one visit to the server.
Tips 9: Use data binding to provide rich client data views.
For more information about data binding, see the following article:
Data binding overview (English)
Bind page data (English)
Skewed, average and de facto data binding (English)
Don't set the expando attribute in the document object
The expando (English) property can be added to any object. This property is very useful, it can store information within the current Wed page and provides another way to extend the DHTML object model. For example, you can specify a clicked attribute to the DHTML element, and use this attribute to prompt the user which element has been clicked. When raising an event, you can also use the expando attribute to provide more context information to the event handler. No matter how you use the expando attribute, remember not to set them on the document (English) object. If you do this, the document must perform an additional recalculation when you access the property.
Tip 10: Set the expando attribute on the window (English) object.
Please show
slow:
for (var i=0; i<1000; i++)
{
var tmp;
= "Things" + i +" item";
tmp = ;
}
quick:
for (var i=0; i<1000; i++)
{
var tmp;
= "Things" + i +" item";
tmp = ;
}
Avoid switching class and style rules
Switching class and style rules is a very expensive operation that requires recalculation and adjustment of the entire document layout. If your Web site uses a stylesheet to provide an alternate view of the content, consider directly modifying the style object of the element you want to change, rather than modifying the element's className property or the styleSheet object associated with the class.
Tips 11: When changing the appearance of the content, directly modify the style object.
Collapse text range before searching for parent
The TextRange (English) object represents a text area selected by the user or retrieved from an HTML element, such as BODY (English). By calling the parentElement (English) method, the parent of the text range can be identified. For complex text ranges, calling the collapse (English) method will be more efficient before calling the parentElement method.
Tips 12: Collapse the text range before accessing the parentElement method.
Table of contents
Introduction
Batch DHTML Changes
Use innerText
Adding a single element using DOM
Extend options in SELECT elements
Update tables with DOM
Write once, use multiple times
Do not use too much dynamic attribute
Data binding is very effective
Don't set the expando attribute in the document object
Avoid switching class and style rules
Collapse text range before searching for parent
Other information
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 features. The flexibility of DHTML makes it common to have multiple ways to implement your idea. Understanding how Internet Explorer’s HTML analysis and display components handle requests can help you determine the best way to get the job done. This article introduces the significant impact of certain DHTML features on performance and provides some tips to improve page performance.
Batch DHTML Changes
On DHTML Web pages, the most effective way to improve performance is to improve changes to HTML content on the page. There are many ways to update a web page, and it is very important to understand this. Judging from customer feedback, Web authors can apply HTML text blocks, or access individual HTML elements by using the DHTML object model (English) or the W3C document object model (DOM) (English). Whenever the HTML content is changed, the HTML analysis and display components of Internet Explorer must reorganize 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 are relatively expensive. If you apply HTML text blocks instead of individual access elements, you must call the HTML parser, which will result in additional performance overhead. Methods and attributes that accept HTML text include the insertAdjacentHTML (English) and pasteHTML (English) methods, as well as the innerHTML (English) and outerHTML (English) attributes.
Tips 1: Make changes to HTML content in a script function. If your design uses multiple event handlers (such as responding to mouse movement), changes should be made centrally.
Another important fact of HTML parsing and displaying components is that once the script returns control (for example, when the script event handler exits, or when methods such as setTimeout are called), the component recalculates the layout and displays the Web page. Now that you have learned how Internet Explorer handles changes, you will start to improve the performance of your web pages below.
Tip 2: Create an HTML string and make changes to the document once, rather than multiple updates. If HTML content is not necessary, consider using the innerText (English) attribute.
In the following example, the slower method calls the HTML parser every time the innerHTML property is set. To improve performance, you can create a string first and assign it to the innerHTML property.
Please show
slow:
= "";
for ( var i=0; i<100; i++ )
{
+= "<SPAN>This is a slower method!</SPAN>";
}
quick:
var str="";
for ( var i=0; i<100; i++ )
{
str += "<SPAN> Because of using strings, this method is faster!</SPAN>";
}
= str;
See Dynamic Content (English) for more information.
Use innerText
The DHTML object model accesses the text content of the HTML element through the innerText (English) attribute, while the W3C DOM provides an independent subtext node. It is faster to directly update the content of an element through the innerText attribute than to call the DOM createTextNode (English) method.
Tips 3: Use the innerText property to update the text content.
The following example shows how to improve performance using the innerText property.
Please show
slow:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
( ( "Use createTextNode()") );
( node );
}
quick:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
= "Use the innerText property";
( node );
}
Adding a single element using DOM
As mentioned earlier, applying the access method of HTML text will cause the HTML parser to be called, which will degrade performance. Therefore, adding elements using the createElement (English) and insertAdjacentElement (English) methods is faster than calling the insertAdjacentHTML method once.
Tips 4: Calling the createElement and insertAdjacentElement methods is faster than calling the insertAdjacentHTML methods.
Batching DHTML updates and calling the insertAdjacentHTML method can improve performance, but sometimes it is more efficient to create elements directly through 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++)
{
( "beforeEnd", "<SPAN> Use insertAdjacentHTML() </SPAN>" );
}
quick:
var node;
for (var i=0; i<100; i++)
{
node = ( "SPAN" );
= "Use insertAdjacentElement()";
( "beforeEnd", node );
}
Extend options in SELECT elements
An exception is the case where a large number of OPTION elements are added to SELECT (English) in the previous rule using HTML text methods. At this time, using the innerHTML attribute is more efficient than calling the createElement method to access the option set.
Tip 5: Use innerHTML to add a large number of options to the SELECT element.
Use the string concatenation operation to create the HTML text of the SELECT element, and then use this technique to set the innerHTML property. For particularly large numbers of options, string concatenation operations can also affect performance. In this case, create an array and call the Microsoft JScript® join (English) method to perform the final connection of the OPTION element HTML text.
Please show
slow:
var opt;
= "<SELECT ID='selUpdate'></SELECT>";
for (var i=0; i<1000; i++)
{
opt = ( "OPTION" );
( opt );
= "Things" + i +" item";
}
quick:
var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)
{
str += "<OPTION>" + i + " item</OPTION>";
}
str += "</SELECT>";
= str;
Faster:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr = "<OPTION>" + i + " item</OPTION>";
}
= "<SELECT ID='selUpdate'>" + () + "</SELECT>";
Update tables with DOM
Inserting rows and cells of a table using the DOM method 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 difference in efficiency is even more obvious.
Tips 6: Use the DOM method to create a large table.
Please show
slow:
var row;
var cell;
for (var i=0; i<100; i++)
{
row = ();
for (var j=0; j<10; j++)
{
cell = ();
= "Thread" + i + " row, " + j +" " cell";
}
}
quick:
var row;
var cell;
var tbody = [0];
( tbody );
for (var i=0; i<100; i++)
{
row = ( "TR" );
( row );
for (var j=0; j<10; j++)
{
cell = ( "TD" );
( cell );
= "Thread" + i + " row, " + j +" " cell";
}
}
Write once, use multiple times
If your Web site uses scripts to perform some common operations, consider putting these features into separate files so that they can be reused by multiple Web pages. This not only improves the maintenance of the code, but also keeps the script file in the browser's cache, so that it only needs to be downloaded locally once when the user visits the site. The same benefits can be achieved by placing common style rules in separate files.
Tips 7: Reuse scripts by putting common code into behavior or standalone files.
To better utilize script reuse function, place commonly used script operations into DHTML additional code or element behavior (English). Behavior provides an efficient way to reuse scripts and build components accessed from HTML and enables you to extend the DHTML object model with your own objects, methods, properties, 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 efficient code encapsulation. Additionally, if your script code is in a SCRIPT (English) block, you will get higher performance.
Do not use too much dynamic attribute
Dynamic attributes (English) provide Web authors with a way to use expressions as attribute values. The expression is calculated at runtime and its resulting value is applied to the property. This is a powerful feature. This feature can be used to reduce the number of scripts on the page, but because the expression must be recalculated regularly, and the expression is often associated with other property values, it has a negative impact on performance. This situation is particularly obvious for positioning attributes.
Tips 8: Restrict the use of dynamic attributes.
Data binding is very effective
Data binding (English) is a powerful feature that allows you to bind the results of a database query or the content of an XML data island (English) to the HTML element on the web page. You can provide data sorting and filtering capabilities, as well as different data views without returning to the server to extract data. Imagine a web page that displays company data as a line chart, bar chart or pie chart, and also has buttons to sort data by office, product, or sales stages, and all of these features are achieved by just one visit to the server.
Tips 9: Use data binding to provide rich client data views.
For more information about data binding, see the following article:
Data binding overview (English)
Bind page data (English)
Skewed, average and de facto data binding (English)
Don't set the expando attribute in the document object
The expando (English) property can be added to any object. This property is very useful, it can store information within the current Wed page and provides another way to extend the DHTML object model. For example, you can specify a clicked attribute to the DHTML element, and use this attribute to prompt the user which element has been clicked. When raising an event, you can also use the expando attribute to provide more context information to the event handler. No matter how you use the expando attribute, remember not to set them on the document (English) object. If you do this, the document must perform an additional recalculation when you access the property.
Tip 10: Set the expando attribute on the window (English) object.
Please show
slow:
for (var i=0; i<1000; i++)
{
var tmp;
= "Things" + i +" item";
tmp = ;
}
quick:
for (var i=0; i<1000; i++)
{
var tmp;
= "Things" + i +" item";
tmp = ;
}
Avoid switching class and style rules
Switching class and style rules is a very expensive operation that requires recalculation and adjustment of the entire document layout. If your Web site uses a stylesheet to provide an alternate view of the content, consider directly modifying the style object of the element you want to change, rather than modifying the element's className property or the styleSheet object associated with the class.
Tips 11: When changing the appearance of the content, directly modify the style object.
Collapse text range before searching for parent
The TextRange (English) object represents a text area selected by the user or retrieved from an HTML element, such as BODY (English). By calling the parentElement (English) method, the parent of the text range can be identified. For complex text ranges, calling the collapse (English) method will be more efficient before calling the parentElement method.
Tips 12: Collapse the text range before accessing the parentElement method.