Improve DHTML page performance _ javascript skills

DHTML page performance improvement Abstract: This article describes the significant impact of some DHTML functions on the performance, and provides some tips to improve 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
Dynamic HTML (DHTML) in Microsoft®The introduction in 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 a change to the document, instead of making multiple updates. If HTML content is not necessary, consider using the innerText attribute.


In the following example, the slow method calls the HTML analyzer every time the innerHTML attribute is set. To improve performance, you can create a string and assign it to the innerHTML attribute.

Show

Slow:

PUpdate. innerHTML = "";
For (var I = 0; I <100; I ++)
{
PUpdate. innerHTML + =" This is a slow method!";
}

Fast:

Var str = "";
For (var I = 0; I <100; I ++)
{
Str + =" This method is faster because it uses strings!";
}
PUpdate. 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. Updating the content of an element 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.

Show

Slow:

Var node;
For (var I = 0; I <100; I ++)
{
Node = document. createElement ("SPAN ");
Node. appendChild (document. createTextNode ("use createTextNode ()"));
PUpdate. appendChild (node );
}

Fast:

Var node;
For (var I = 0; I <100; I ++)
{
Node = document. createElement ("SPAN ");
Node. innerText = "using innerText attributes ";
PUpdate. 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, using the createElement (English) and insertAdjacentElement (English) Methods to add elements is faster than calling the insertAdjacentHTML method once.

Tip 4: calling the createElement and insertAdjacentElement methods is faster than calling the insertAdjacentHTML method.


Batch Processing of DHTML updates and calling the insertAdjacentHTML method 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 ++)
{
PUpdate. insertAdjacentHTML ("beforeEnd "," Use insertAdjacentHTML ()");
}

Fast:

Var node;
For (var I = 0; I <100; I ++)
{
Node = document. createElement ("SPAN ");
Node. innerText = "using insertAdjacentElement ()";
PUpdate. 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. At this time, using the innerHTML attribute is more efficient than calling the createElement method to access the set of options.

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


Use a string connection operation to create the HTML text of the SELECT element, and then use this technique to set the innerHTML attribute. For a large number of options, the string connection operation also affects the performance. In this case, create an array and call Microsoft JScript®The join (English) method is used to execute the final join of the OPTION element HTML text.

Show

Slow:

Var opt;
PUpdate. innerHTML =" ";
For (var I = 0; I <1000; I ++)
{
Opt = document. createElement ("OPTION ");
SelUpdate. options. add (opt );
Opt. innerText = "item" + I + ";
}

Fast:

Var str =" ";For (var I = 0; I <1000; I ++){Str + ="Item "+ I +"";}Str + ="";
PUpdate. innerHTML = str;

Faster:

Var arr = new Array (1000 );
For (var I = 0; I <1000; I ++)
{
Arr =" Item "+ I +"";
}
PUpdate. innerHTML =" "+ Arr. join () +"";

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: place common code into a behavior or independent file to 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: Use Data Binding 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 specify a clicked attribute for the DHTML element to indicate which element the user has clicked. When an event is triggered, you can also use the expando attribute to provide more context information to the event processing function. No matter how you use the expando attribute, 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 the expando attribute on the window object.


Show

Slow:

For (var I = 0; I <1000; I ++)
{
Var tmp;
Required parameter Doc ument. myProperty = "+" + I + "";
Tmp = your own Doc ument. myProperty;
}

Fast:

For (var I = 0; I <1000; I ++)
{
Var tmp;
Window. myProperty = "item" + 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: Modify the style object directly when changing the appearance of the content.


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 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.