Accelerate a group of skills of DHTML

Accelerate a group of skills of DHTML

Mark DaviSmicrosoft Corporation

Abstract: This article illustrates some of the significant impact of certain DHTML functions and provides some techniques for improving DHTML page performance.

table of Contents

Introduction Batch DHTML Change Use Innertext Use the DOM to add a single element to extend the option in the select element with a DOM update table, use multiple times, do not use the dynamic property data binding, do not set an expando attribute in the Document object to avoid Change classes and style rules Fold before folding with other information

Introduction

Dynamic HTML (DHTML) Introduction in Microsoft® Internet Explorer 4.0, allows web authorities and developers to use new programming models. Since then, the Web author takes advantage of this powerful feature to provide dynamic content, style, and positioning, so that web users can experience rich interactive features. The flexibility of DHTML makes it usually in a variety of ways to achieve your idea. Understand the HTML analysis of Internet Explorer and how to deal with the request, help you determine the best way to complete your work. This article describes some of the significant impact of certain DHTML functions and provides some techniques for improving page performance.

Batch DHTML change

In the DHTML web page, the most efficient way to improve performance is to improve changes to HTML content on the page. There are a variety of ways to update the web page and understand this is very important. From the customer's feedback, the web author can apply the HTML text block, or you can access individual HTML elements by using the DHTML object model (English) or W3C Document Object Model (DOM) (English). Whenever you change HTML content, Internet Explorer's HTML analysis and display components must reassure the internal performance form of the page, recalculate document layout and document stream, and display these changes. Although the actual performance is determined by the content of the web page and the changes you make, these operating costs are relatively large. If you apply an HTML text block, instead of individual access elements, you must call the HTML analyzer, which will result in additional performance overhead. Method and attributes receiving HTML text include INSERTADJACENTHTML (English) and Pastehtml (English) methods, and InnerHTML (English) and OuterHTML (English) attribute.

Tips 1: Change the HTML content in a scripting function. If your design uses multiple event handles (eg, responding to mouse movements), you should centralize.

Another important fact that HTML analysis and display components is: Once script returns control (for example, when the script event handler exits, or when the SETTIMEOUT (English) is called), the component will recalculate the layout and display the web page. . Now, you have learned how Internet Explorer handle changes, which will begin to improve the performance of the web page.

Tip 2: Create an HTML string and make a change in the document, not multiple updates. If the HTML content is not necessary, consider using the Innertext (English) attribute.

In the following example, the slower method is called each time the InnerHTML property is set. To improve performance, you can create a string first, and then assign it to the InnerHTML property.

Please display

slow:

Divupdate.INNNERHTML = "";

FOR (var i = 0; i <100; i )

{

Divupdate.innerhtml = " This is a slower way! ";

}

fast:

Var str = ""

FOR (var i = 0; i <100; i )

{

Str = " This method is faster than using the string! ";

}

Divupdate.innerhtml = STR;

For more information, see Dynamic Content (English).

Use Innertext

The DHTML object model accesses the text content of the HTML element through the Innertext (English) property, and W3C DOM provides a separate sub-text node. Directly update the content of the element directly through the Innertext property, faster than calling the Dom CreateTextNode (English) method.

Tips 3: Update the text content using the Innertext property.

The following example shows how to use Innertext properties to improve performance.

Please display

slow:

Var node;

FOR (var i = 0; i <100; i )

{

Node = Document.createElement ("span");

Node.Appendchild (Document.createTextNode ("Using CreateTextNode ()));

Divupdate.Appendchild (Node);

}

fast:

Var node;

FOR (var i = 0; i <100; i )

{

Node = Document.createElement ("span");

Node.innertext = "Use Innertext Properties";

Divupdate.Appendchild (Node);

}

Add a single element using DOM

As mentioned earlier, the access method of applying HTML text will result in calling an HTML analyzer, thereby reducing performance. Therefore, adding an element using CreateElement (English) and INSERTADJACENTELEMENT (English) method is fast than calling the InsertJacenthtml method.

Tips 4: Call CreateElement and InsertAdjacentelement methods are fast than calling the InsertAdJacenthtml method.

Batch DHTML update and calls an InsertJacenthtml method to improve performance, but sometimes it is more efficient to create elements directly through DOM. In the following scenarios, you can try these two methods and determine which one is faster.

Please display

slow:

FOR (var i = 0; i <100; i )

{

Divupdate.insertadjacenthtml ("Beforeend", " Using INSERTADJACENTHTML () ");

}

fast:

Var node;

FOR (var i = 0; i <100; i )

{

Node = Document.createElement ("span");

Node.innertext = "Use INSERTADJACENTELEMENT ()";

Divupdate.Insertadjacentelement ("BeforeEnd", Node);

}

Expand the options in the Select element

For the case of the last rule using the HTML text method, it is an exception to the case of adding a large number of options (English) elements. At this time, the use of the InnerHTML attribute is higher than that in calling CreateElement methods.

Tips 5: Use InnerHTML to add a large number of options to the SELECT element.

Use string connection operations to create an HTML text of the SELECT element, and then use this tip to set the InnerHTML property. For options that are particularly large, string connection operations 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 display

slow:

VAR OPT;

Divupdate.innerhtml = " ";

FOR (var i = 0; i <1000; i )

{

OPT = Document.createElement ("option");

SELUPDATE.OPTIONS.ADD (OPT);

Opt.innertext = "Part" i "item";

}

fast:

Var str = "

FOR (var i = 0; i <1000; i )

{

STR = "" i "item ";

}

Str = "";

Divupdate.innerhtml = STR;

Faster:

Var arr = new array (1000);

FOR (var i = 0; i <1000; i )

{

Arr [i] = "" i "item ";

}

Divupdate.innerhtml = "" arr.join () "";

Update table with DOM

Using the DOM method inserting the table and cells using the InsertRow (English) and Insertcell (English) methods (part of the DHTML Table object model) efficiency higher. Especially in the creation of large tables, the difference in efficiency is more obvious.

Tips 6: Establish a big table using the DOM method.

Please display

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 = " " line, " 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 = " " line, " J " cell ";

}

}

Write once, use multiple times

If your Web site uses the script to perform some common operations, you can consider putting these features in a separate file so that you can reuse multiple web pages. Do not only improve the maintenance of the code, but also keep the script file in the browser's cache, just download it to this place when the user has access the site. Place the common style rules can also be beneficial in a separate file.

Tips 7: Reuse scripts by placing common code in behavior or independent files.

To better utilize script reuse, place the commonly used script to operate in DHTML Additional Code or Element Behavior (English). Behavior provides an effective way to reuse scripts and build components accessing from HTML and enable you to extend the DHTML object model with your objects, methods, properties, and events. For behaviors that do not use the ViewLink (English) function, you can consider a more efficient code package using the LightWeight (English) behavior characteristics in Internet Explorer 5.5. Also, if your script code is in a Script block, you will get higher performance.

Do not use dynamic properties too much

Dynamic Properties (English) provides a method of using an expression as an attribute value for a web. Expression calculates at runtime, and its result value will be applied to attributes. 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 raised timed, the expression is often related to other attribute values, so it will have a negative impact on performance. This situation is particularly obvious on the positioning properties.

Tips 8: Limit using dynamic properties.

Data binding is very effective

Data Binding (English) is a powerful feature that allows you to query the results of the database or 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 server extraction data. Imagine a web page to display the company's data as a line chart, bar chart or pie chart, and a button that will be sorted by the data, the product, or sales phase, and all these functions can only be implemented. Skill 9: Use data binding to provide a rich client data view.

For more information on data binding, see the following article:

Data Binding Overview (English) Binding Page Data (English) Tilt, Average, and Rabi Bindings (English)

Do not set an Expando property in the Document object

Expando (English) property can be added to any object. This property is very useful, it can store information in the current WED page, and provide another way to extend the DHTML object model. For example, you can specify a click attribute to the DHTML element and use this property to prompt the user which element is already clicked. When incident, you can also use the Expando property to provide more context information to the event handler. No matter how you use an Expando property, remember not to set them on the Document object. If you do this, when you access this property, the documentation must perform additional bailout operations.

Tips 10: Set the Expando properties on the Window object.

Please display

slow:

FOR (var i = 0; i <1000; i )

{

VAR TMP;

Window.Document.myproperty = "Part I " Item;

TMP = window.document.myproperty;

}

fast:

FOR (var i = 0; i <1000; i )

{

VAR TMP;

Window.myProperty = "No. I " Item;

TMP = window.myproperty;

}

Avoid switching and style rules

Switching and style rules are a very high operation, requiring recalculation and adjusting the layout of the entire document. If your Web site uses a style sheet to provide an alternate view of the content, you can consider the STYLE (English) object you want to change directly, not the classname (English) property of the element or the Stylesheet (English) object associated with the class. .

Tips 11: Modify the Style object directly when changing the appearance of the content.

Follow the parent before folding the text

The TextRange object represents a text area that the user selects or retrieved from the HTML element, such as Body (English). By calling the ParenTelement (English) method, you can identify the parent of the text range. For complex text scope, the COLLAPSE (English) method is more efficient before calling the Parentelement method.

Tips 12: Fold the text range before accessing the Parentelement method. For more information, see Using the TextRange object (English).

other information

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

Establish a high-performance HTML page (English) to improve performance (English) Frequent leap: Improve the performance of DHTML page (English)

Mark Davis is a software design engineer of the Internet Explorer SDK document group. He relentlessly explored the latest technology of Internet Explorer, but sometimes it will relax in the northwest.

转载请注明原文地址:https://www.9cbs.com/read-89744.html

---

9cbs

New Post(0)