A set of techniques for speeding up DHTML
Author：Eve Cole
Update Time：2009-06-20 16:59:57
Dynamic HTML (DHTML) at Microsoft? In Internet Explorer 4.0
Introduced to make new programming models available to web authors and developers. Since then, Web authors have
Take full advantage of this powerful feature to provide dynamic content, styling and positioning so that web users can
Experience rich interactive features. The flexibility of DHTML means that there are usually multiple ways to implement
Your idea. Understand how Internet Explorer's HTML parsing and display components process
to help you determine the best way to get the job done. This article describes some of the functionality of DHTML
significant impact on performance and provides some tips for improving page performance.
Batch DHTML changes
On DHTML web pages, the most effective way to improve performance is to improve the
Changes in content. There are several ways to update a web page, which is important to understand. Congke
Judging from user feedback, Web authors can use HTML text blocks or they can use DHTML
Object Model (English) or W3C Document Object Model (DOM) (English) to access individual HTML
element. Whenever you change the HTML content, Internet Explorer's HTML parsing and display
All display components must reorganize the internal representation of the page, recalculate the document layout and document
stream and display these changes. Although actual performance is determined by the content of the Web page and the changes you make
, but these operations are relatively expensive. If you use HTML text blocks instead of individual
To access the element, the HTML parser must be called, which will cause additional performance overhead. Accept HTML
Text methods and properties include insertAdjacentHTML (English) and pasteHTML (English)
text) method, as well as the innerHTML (English) and outerHTML (English) attributes.
Tip 1: Make changes to HTML content in a script function. If your design uses
If you have multiple event handlers (e.g. in response to mouse movements), the updates should be centralized
change.
Another important fact about HTML parsing and displaying components is that once the script returns control (e.g.
When the script event handler exits, or when methods such as setTimeout (English) are called),
This component will recalculate the layout and display the web page. Now you know about Internet Explorer
How to handle changes, below will start improving the performance of your web pages.
Tip 2: Create an HTML string and make one change to the document instead of multiple
times updated. If HTML content is not necessary, consider using
innerText (English) property.
In the following example, the slower method calls HTML every time the innerHTML property is set
Analyzer. To improve performance, you can first build a string and then assign it to innerHTML
property.
slow:
divUpdate.innerHTML = "";
for (var i=0; i<100; i++)
{
divUpdate.innerHTML += "This is a slower method!";
}
quick:
var str="";
for (var i=0; i<100; i++)
{
str += "Because it uses strings, this method is faster!";
}
divUpdate.innerHTML = str;
Use innerText
The DHTML object model accesses the text of an HTML element through the innerText (English) attribute.
content, while the W3C DOM provides an independent child text node. Directly through the innerText attribute
Update the content of the element permanently, faster than calling the DOM createTextNode (English) method.
Tip 3: Use the innerText property to update text content.
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( "Use createText
Node() ") );
divUpdate.appendChild(node);
}
quick:
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "Use innerText property";
divUpdate.appendChild(node);
}
Add a single element using the DOM
As mentioned earlier, applying the access method of HTML text will cause the HTML parser to be called, from
It will reduce performance. So using createElement (English) and insertAdjacent
The Element (English) method adds elements faster than calling the insertAdjacentHTML method once.
Tip 4: Call the createElement and insertAdjacentElement methods faster than calling
The insertAdjacentHTML method is fast.
Batching DHTML updates and calling the insertAdjacentHTML method once can improve
Performance, but sometimes it's more efficient to create elements directly from the DOM. In the scenario below, you can
to try both methods and determine which one is faster.
slow:
for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Use insert
AdjacentHTML() " );
}
quick:
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 OPTIONs (English)
An exception is the case where elements are added to SELECT (English). At this time, use innerHTML
Properties are more efficient than calling the createElement method to access a collection of options.
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, and then use this
Tips for setting the innerHTML attribute. For particularly large numbers of options, the string concatenation operation will also
affect performance. In this case, create an array and call Microsoft JScript join
(English) Method to perform final concatenation of the HTML text of the OPTION element.
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 = "Item" + i + "Item";
}
quick:
var str="〈SELECT ID='selUpdate'〉";
for (var i=0; i<1000; i++)
{
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
Faster:
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";
Update table with DOM
Using the DOM method to insert table rows and cells is better than using insertRow (English) and insert
The Cell (English) method (part of the DHTML table object model) is more efficient. especially in
When creating large tables, the difference in efficiency is even more obvious.
Tip 6: Use DOM methods to create large tables.
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 + " , cell " + j + " ";
}
}
quick:
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 + " , cell " + j + " ";
}
}
Write once, use many
If your website uses scripts to perform common operations, consider adding these functions
Can be placed in a separate file so that it can be reused by multiple Web pages. In doing so, not only
It can improve the maintainability of the code and keep the script file in the browser cache, thus
It only needs to be downloaded locally once when the user visits the site. Put commonly used style rules in separate
The same benefits can be obtained in files.
Tip 7: Reuse scripts by putting frequently used code into actions or standalone files
To take better advantage of script reuse, place frequently used script operations into DHTML add-ins.
code or element behavior (English). Behaviors provide an efficient way to reuse scripts and
Create components that are accessed from HTML and enable you to use your own objects, methods, properties, and events to
Extended DHTML object model. For behavior that does not use the viewlink (English) feature, you can
Consider using the lightweight behavior feature in Internet Explorer 5.5
More efficient code encapsulation. Also, if your script code is in a SCRIPT (English)
In blocks, higher performance will be achieved.
Don’t use dynamic attributes too much
Dynamic properties (English) provide web authors with a way to use expressions as property 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 since expressions must be re-evaluated periodically, and
This expression is often related to other property values, so it can have a negative impact on performance. This kind of
This is especially true for positioning properties.
Tip 8: Limit the use of dynamic properties.
Data binding works great
Data binding (English) is a powerful feature that allows you to combine the results of a database query
Fruit or XML data island (in English) content, bound to the HTML element on the Web page. You don't have
Need to return to the server to extract data, it can provide data sorting and filtering functions, as well as different data
data view. Imagine a Web page that displays a company's data as a line chart, bar chart, or pie chart
graph, also has buttons to sort the data by office, product, or sales stage, and all
The function only needs to access the server once to implement it.
Tip 9: Use data binding to provide a rich client view of your data.
Do not set the expando attribute on the document object
The expando (English) attribute can be added to any object. This property is very useful, it can
to store information within the current Wed page and provide another way to extend the DHTML object model
Law. For example, you can assign a clicked attribute to a DHTML element and use this attribute to prompt the user
Which element the user has clicked. When raising an event, you can also use the expando attribute to
Event handlers provide more contextual information. No matter how you use the expando attribute, cut
Remember not to set them on the document (English) object. If you do this, when you visit
When asking for this property, the document must perform additional recalculation operations.
Tip 10: Set the expando attribute on the window (English) object.
slow:
for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Item" + i + "Item";
tmp = window.document.myProperty;
}
quick:
for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Item" + i + "Item";
tmp = window.myProperty;
}
Avoid switching class and style rules
Switching class and style rules is a very expensive operation that requires recalculation and adjustment of the entire
The layout of a document. If your Web site uses style sheets to provide alternate views of content, you can
To consider directly modifying the style (English) object of the element to be changed, rather than modifying the element's
className (English) attribute or styleSheet (English) object associated with the class.
Tip 11: When changing the appearance of content, modify the style object directly.
Collapse text range before finding parent
A TextRange (English) object represents a user-selected or retrieved from an HTML element
Text area, such as BODY (English). By calling the parentElement (English) method,
Can identify the parent of a text range. For complex text ranges, call parentElement
Before the method, it will be more efficient to call the collapse (English) method first.
Tip 12: Collapse the text range before accessing the parentElement method.
Excerpted from http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
