Home > Developer > JavaScript
One 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:
<Html>
<Body>
<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 <max; 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>
</Body>
</Html>
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:
<Html>
<Body>
<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 <max; 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>
</Body>
</Html>
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 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:
<Html>
<Body onload = "init ()">
<Script defer>
Function init (){
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 <max; 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>
</Body>
</Html>
View the fourth sample.
The testing time is 2043 ms. Compared with the baseline test, it is increased by 12%, Which is 2.5% higher than the previous test.
The improvement method we will discuss below is very useful, and of course it is a little more troublesome. When you need to create an element and insert it into the tree structure, it is more efficient to directly insert it into the trunk ---- instead of inserting it into the large subtree first, then insert the large subtree into the trunk. For example, if you create a table with a column in each row and some text in the column, you can do this:
1. Create <TR>
2. Create <TD>
3. Create a TextNode Node
4. Insert TextNode <TD>
5. Insert <TD> to <TR>
6. Insert <TR> to TBODY
When it is slower than the following method:
1. Create <TR>
2. Create <TD>
3. Create TextNode
4. Insert <TR> to TBODY
5. Insert <TD> to <TR>
6. Insert TextNode to <TD>
The above four tests use the previous method. We use the next method for 5th tests. The Code is as follows:
<Html>
<Body onload = "init ()">
<Script defer>
Function init (){
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 <max; I ++ ){
Tr = theDoc. createElement ("TR ");
Td = theDoc. createElement ("TD ");
Text = theDoc. createTextNode ("Text ");
Tbody. insertBefore (tr, null );
Tr. insertBefore (td, null );
Td. insertBefore (text, null );
}
}
</Script>
</Body>
</Html>
View the processing th sample.
Test5 only takes 1649 ms. This is 25% higher than the previous test, almost 30% faster than the baseline.
The subsequent modification was to use a pre-made style sheet. If the width of a table column in a premade style table is used or the <COL> label is used, the width of each column is evenly distributed without the <COL> label. Because you do not need to recalculate the size of each column, using a style sheet actually improves performance, especially when the number of columns in a table is large.
The code for adding a style sheet (CSS) is very simple, as follows:
Tbl. style. tableLayout = "fixed ";
View the sixth sample.
Because the table in our test only has one column, this change only improves the performance of the page by 1.6%. If there are more columns, the performance will increase.
The last two tests changed the method for inserting text into a table. In the previous test, we created a TextNode and inserted it into TD. In Test7, we use innerText to specify the contained text. The modified code is:
Td. innerText = "Text ";
View the seventh sample.
Surprisingly, this change produces a big difference-a 9% improvement in performance over the previous one, a 36% improvement in performance over the first one. The time ranges from the initial 2323ms to the last 1473 ms.
Now, almost everyone knows that using element. innerHTML is very slow. To see how slow it is, I did my last test: Using innerHTML instead of innerText to insert text. This greatly reduces performance. The time reaches 3375 ms, which is 80% slower than the previous test and 45% slower than the baseline test. Obviously, innerHTML is very time-consuming.
Adjusting the HTML page performance is similar to adjusting the Win32 application performance. You need to know what is slow and what is fast. We hope these methods can help you improve the page performance.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
