Improve HTML page performance skills
Michael Wallent Microsoft
Http://msdn.microsoft.com/library/en-us/dndude/html/dude100499.asp?frame=true
A very important piece of Microsoft's development cycle is to adjust the performance of the product. Performance adjustments are also one of the key parts that developers should pay attention to. After years of development, the industry has a lot of understanding of how to optimize Win32 program performance.
One of the problems encountered by developers is not clear what caused DTHML and HTML pages to run fast or slow. Of course, there are some simple methods - such as don't use 2MB of large pictures. We have used some other interesting techniques to improve the performance of the DHTML page, I hope they can help you improve your page performance.
Here I use a program example of establishing a table. The 1000-line table (Table) is created with Document.CreateElement () and Element.Isertbefore () methods. There is a column per line. The contents included in the Cell are called "text". How can this code? How can such a small process of such a small program? Please read the introduction.
At first I wrote a self-thinking process, I tried to avoid some low-level issues --- Image like not explicitly defined, or using VBScript and JavaScript simultaneously in a page. The procedure is as follows:
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> body> html> View the first sample. I run this program on the machine of PII233 / 64MB memory /NT4.0/IE5.0. The page is loaded from this unit. From the start load page to the page is completely quiet (all events have been run, the screen display is complete) time is 2328 ms, which is the baseline of this test (I call Test1). Among this page, a very time consuming operation is frequently reference global objects, such as "Document", "Body", "Window", etc. Reference all these similar global variables are far more expensive than references a local variable. So I made the first improvement attempt: cache Document.body to the local variable "thebody": Added the following code: Var thebody = document.body; Then modify this line: Document.Body.insertbefore (TBL, NULL); Change it to: Thebody.insertbefore (TBL, NULL); View The Second Sample. This revision did not significantly affected the overall time, which shortened 3 ms. However, it has shown that if there is a Document.Body object in the loop, it will be modified, and the benefits will be considerable. Subsequently, I cached Document objects - in our test, the Document object is a total of 3002 times. The modified code is as follows:
VAR TBL, TBODY, TR, TD, TEXT, I, MAX
MAX = 1000;
Var thedoc = document;
Var thebody = these Dec.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 = these Doc.createTextNode ("text"); Td.insertbefore (Text, Null); Tr.Insertbefore (TD, NULL); Tbody.insertbefore (TR, NULL); } script> body> html> View the third sample. This runtime is only 2100ms, which saves approximately 10%. Use local variables instead of directly reference the Document object averaged 0.4 milliseconds each time. A commonly used optimization performance is: Set the "Defer" property in the