Tips for improving Code Performance-using the example of creating a thousand rows table _ javascript skills

Tips for improving Code Performance-taking the creation of thousands of rows of tables as an example, an important part of Microsoft's development cycle is to adjust the product performance. Performance adjustment is also a key part for developers to pay attention. After years of development, the industry has learned a lot about optimizing Win32 program performance.

One of the problems that developers encounter today is that it is unclear what causes DTHML and HTML pages to run fast or slowly. Of course, there are some simple methods-for example, do not use 2 MB images. We have used other interesting techniques to improve the performance of DHTML pages and hope they can help you improve your page performance.

Here I use a program to create a Table. The document. createElement () and element. insertBefore () methods are used to create the Table of Row 1000 ). Each row has a Cell column ). The content contained in Cell is called "Text ". How bad can this code be? How much room can be adjusted for such a small program? See the Introduction.

At first I wrote a program that I thought would be very fast. I tried to avoid some low-level problems, such as not explicitly defining variables, or using VBScript and Javascript on a page at the same time. The procedure is as follows:

Script
Var tbl, tbody, tr, td, text, I, max;
Max = 1000;

Tbl = document. createElement ("TABLE ");
Tbl. border = "1 ";
Tbody = document. createElement ("TBODY ");
Tbl. insertBefore (tbody, null );
Document. body. insertBefore (tbl, null );
For (I = 0; I Tr = document. createElement ("TR ");
Td = document. createElement ("TD ");
Text = document. createTextNode ("Text ");
Td. insertBefore (text, null );
Tr. insertBefore (td, null );
Tbody. insertBefore (tr, null );
}
Script

Run this program on PII233/64 MB memory/NT4.0/IE5.0 machine. The page is loaded from the local machine. The time from loading the page to completely quiet (all events have been run and the screen is displayed) is 2328 milliseconds, which is also the baseline of this test (I call it Test1 ).

On this page, a very time-consuming operation is to frequently reference global objects, such as "document", "body", and "window. Referencing all these similar global variables is far more expensive than referencing a local variable.

So I made the first improvement attempt: Cache the document. body to the local variable "theBody:

The following code is added:

Var theBody = document. body;
Then modify this line:

Document. body. insertBefore (tbl, null );
Change it:

TheBody. insertBefore (tbl, null );
View the second sample.

This modification does not significantly affect the overall time. It only shortens the time by 3 ms. However, it has shown that if there is a document. body object in the loop and Its Reference is modified, the benefits will be considerable.

Then, I cached the document Object-in our test, the document object was referenced for 3002 times. The modified code is as follows:

Script
Var tbl, tbody, tr, td, text, I, max;
Max = 1000;
Var theDoc = document;
Var theBody = theDoc. body;

Tbl = theDoc. createElement ("TABLE ");
Tbl. border = "1 ";
Tbody = theDoc. createElement ("TBODY ");
Tbl. insertBefore (tbody, null );
TheBody. insertBefore (tbl, null );
For (I = 0; I Tr = theDoc. createElement ("TR ");
Td = theDoc. createElement ("TD ");
Text = theDoc. createTextNode ("Text ");
Td. insertBefore (text, null );
Tr. insertBefore (td, null );
Tbody. insertBefore (tr, null );
}
Script


View the third sample.

The running time is only 2100 ms, saving about 10% of the time. Using local variables instead of directly referencing document objects saves an average of 0.4 milliseconds each time.

A common method to optimize performance is to set the "defer" attribute in the SCRIPT label when the SCRIPT does not need to be run immediately. (The script is not included in a function block, so it will be executed during the loading process .) After setting the "defer" attribute, IE does not have to wait until the script is loaded and executed. In this way, page loading will be faster. In general, this also indicates that it is best to place the script immediately in the function block and process the function in the onload handle of the document or body object. This attribute is useful when some scripts are executed depending on user operations, such as clicking a button or moving the mouse to a certain area. However, when some scripts need to be executed during or after page loading, the benefits of using the defer attribute are not great.

The code version after the defer attribute is modified is as follows: