Improve DHTML page performance_javascript tips

Summary: This article explains the significant performance impact of certain DHTML features and provides some tips for improving the performance of DHTML pages.

Table of Contents

Introduction
Batch DHTML changes
Use innerText
Add individual elements using DOM
Expand options in SELECT elements
Update with DOM Table
Write once, use many times
Don’t use too many dynamic attributes
Data binding is effective
Don’t set the expando attribute in the document object
Avoid switching classes and style rules
Collapse text range before finding parent
Additional information

Introduction
The introduction of Dynamic HTML (DHTML) in Microsoft® Internet Explorer 4.0 gives web authors and developers access to the new programming model. Web authors have since taken advantage of this powerful feature to provide dynamic content, styling, and positioning, allowing Web users to experience rich interactive capabilities. The flexibility of DHTML means there are usually multiple ways to implement your ideas. Understanding how Internet Explorer's HTML parsing and display components handle requests can help you determine the best way to get the job done. This article describes the significant performance impact of certain DHTML features and provides some tips for improving page performance.

Batching DHTML changes
The most effective way to improve performance on DHTML web pages is to improve changes to the HTML content on the page. There are many ways to update a web page, and it's important to understand this. Based on 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, Internet Explorer's HTML parsing and display components must reorganize the page's internal representation, recalculate the document layout and document flow, and display the changes. Although actual performance is determined by the content of the Web page and the changes you make, these operations are expensive. If you use blocks of HTML text instead of accessing elements individually, you must call the HTML parser, which incurs additional performance overhead. Methods and properties that accept HTML text include insertAdjacentHTML (English) and pasteHTML (English) methods, as well as innerHTML (English) and outerHTML (English) attributes.

Tip 1: Make changes to HTML content in a script function. If your design uses multiple event handlers (for example, in response to mouse movement), you should make changes centrally.


Another important fact about HTML parsing and displaying components is that once the script returns control (for example, when a script event handler exits, or when a method such as setTimeout is called), the The component will recalculate the layout and display the web page. Now that you understand how Internet Explorer handles changes, you can start improving the performance of your Web pages.

Tip 2: Create an HTML string and make one change to the document instead of 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 first build a string and then assign it to the innerHTML attribute.

Please display

slow:

divUpdate.innerHTML = "";
for ( var i=0; i{
divUpdate.innerHTML = "This is a slower method!";
}

Fast:

var str="";
for ( var i=0; i{
str = "Because it uses strings, this method is faster! ";
}
divUpdate. innerHTML = str;

See Dynamic Content (English) for details.

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 child text node. Updating the content of the element directly through the innerText attribute is faster than calling the DOM createTextNode (English) method.

Tip 3: Use the innerText attribute to update text content.


The following example shows how to use the innerText attribute to improve performance.

Please display

slow:

var node;
for (var i=0; i{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "Use createTextNode() ") );
divUpdate.appendChild( node );
}

Quick ：

var node;
for (var i=0; i{
node = document.createElement( "SPAN" );
node.innerText = "Use the innerText attribute";
divUpdate.appendChild( node );
}

Add a single element using the DOM
As mentioned before, applying the HTML text access method will result in a call to HTML analyzer, thereby reducing 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 calling the insertAdjacentHTML method.


Batching DHTML updates and calling the insertAdjacentHTML method once can improve performance, but sometimes it is more efficient to create elements directly through the DOM. In the scenario below, you can try both methods and determine which one is faster.

Please display

slow:

for (var i=0; i{
divUpdate.insertAdjacentHTML( "beforeEnd", " Use insertAdjacentHTML() " );
}

Fast:

var node;
for (var i=0; i{
node = document.createElement( "SPAN" );
node.innerText = "Use insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}

Expand options in SELECT elements
The case of adding a large number of OPTION (English) elements to the SELECT (English) is an exception to the previous rule using the HTML text method. At this time, using the innerHTML attribute is more efficient than calling the createElement method to access the option collection.

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


Use string concatenation operations to build the HTML text of the SELECT element, then use this technique to set the innerHTML attribute. For particularly large numbers of options, string concatenation operations can also impact performance. In this case, create an array and call the Microsoft JScript® join method to perform the final join of the OPTION element HTML text.

Please display

slow:

var opt;
divUpdate.innerHTML = "";
for (var i=0 ; i{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "item " i " ";
}

Fast:

var str="";
for (var i=0; i{
str = " i " item ";
}
str = "";
divUpdate.innerHTML = str;

Faster ：

var arr = new Array(1000);
for (var i=0; i{
arr = "Item " i " ";
}
divUpdate.innerHTML = "" arr.join() "";

Update table using DOM
Insert table using DOM method rows and cells more efficiently 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.

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


Please display

Slow:

var row;
var cell;
for (var i=0; i{
row = tblUpdate.insertRow();
for (var j=0; j{
cell = row.insertCell();
cell .innerText = "Row " i ", cell " j ";
}
}

Fast:

var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i{
row = document.createElement ( "TR" );
tbody.appendChild( row );
for (var j=0; j{
cell = document.createElement( "TD" );
row.appendChild( cell );
cell.innerText = "row " i ", cell " j ";
}
}

Write once, use Many times
If your web site uses scripts to perform some common operations, consider putting these functions into separate files so that they can be reused by multiple web pages. Doing so not only improves the maintainability 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. You can achieve the same benefits by placing frequently used style rules in separate files.

Tip 7: Reuse scripts by putting frequently used code into actions or standalone files.


To take better advantage of script reuse, place commonly used script operations into DHTML appenders or element behaviors (English). Behaviors provide an efficient way to reuse scripts and build components that are accessed from HTML, and enable 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 effective code encapsulation. Also, you'll get better performance if your script code is in a SCRIPT (English) block.

Don’t use dynamic attributes too much
Dynamic attributes (English) provide a way for web authors to use expressions as attribute values. The expression is evaluated at runtime and its resulting value is applied to the attribute. This is a powerful feature. This feature can be used to reduce the amount of script on the page, but it can have a negative impact on performance because the expression must be periodically re-evaluated and the expression is often related to other property values. This is especially true for positioning properties.

Tip 8: Limit the use of dynamic properties.


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 HTML elements on a web page. You can provide data sorting and filtering capabilities, as well as different views of the data, without having to go back to the server to fetch the data. Imagine a Web page that could display a company's data as a line, bar, or pie chart, with buttons to sort the data by office, product, or sales stage, all with just a single access to the server.

Tip 9: Use data binding to provide a rich client-side view of your data.


For more information about data binding, see the following articles:

Data Binding Overview (English)

Binding Page Data (English)

Slanted, average and de facto data binding (English)
Do not set the expando attribute in the document object
The expando (English) attribute can be added to any object. This property is useful because it stores information within the current Wed page and provides another way to extend the DHTML object model. For example, you can assign a clicked attribute to a DHTML element and use this attribute to indicate which element the user has clicked. When raising an event, you can also use the expando attribute to provide more contextual information to the event handler. No matter how you use the expando properties, remember not to set them on a document (English) object. If you do this, the document must perform additional recalculations when you access the property.

Tip 10: Set the expando attribute on the window (English) object.


Please display

Slow:

for (var i=0; i{
var tmp;
window.document.myProperty = "item " i "; ; i{
var tmp;
window.myProperty = "item";
tmp = window.myProperty;
}
Avoid switching classes and style rules
Switching classes and style rules is a very expensive operation that requires recalculating and adjusting the layout of the entire document. If your Web site uses style sheets to provide alternative views of content, consider modifying the style object directly of the element you want to change, rather than modifying the element's className attribute or the styleSheet object associated with the class. .

Tip 11: Directly modify the style object when changing the appearance of the content.


Collapse the text range before finding the parent
TextRange (English) object represents a text area selected by the user or retrieved from an HTML element, such as BODY (English). The parent of a text range can be identified by calling the parentElement (English) method. For complex text ranges, it is more efficient to call the collapse (English) method before calling the parentElement method.

Tip 12: Collapse the text range before accessing the parentElement method.