Original: Mark Davis Translation: Onefi April 21, 2004
Summary: This article consists of some scripts that are often used in web design. We can clearly experience the execution speed. This will help improve your dynamic web page. Introduction: Since IE4.0, we have seen the words a day day. It can be said that the arrival of the IE4 era is a more broadness in our eyes. We apply IE4, which we get the benefits is that more pictures, animations, web effects can be added to your own personal site to reflect our individuality. Powerful DHTML technology makes the web page will have an unusual change. Even at some moment, using this technology can imitate a lot of things -, such as Windows interface, Flash's dynamic effects - Of course, the premise is that you need to master this technology. DHTML has a very interesting place that usually, the same function provides more than one implementation form. In other words, we can use different code to implement the same functionality. But this has the problem of performing efficiency, and this article, what we discuss is this. Variations in the DHTML page: a basic update dynamic web page method changes your webpage. The client's script you can add new elements to the web with DHTML Object Model or W3C Document Object Model (DOM). No matter when you change the dynamic web page, the browser always identifies the inner representation of the web page, and then recalculates the specific size of the content of the exhibition on the web page. If you want to join a new piece on the web, the HTML syntax analyzer is required to be called, and it will inevitably bring a part of the excess overhead. You can use INSERTADJACENTHTML and PASTEHTML to add new content text on the web page, and both innerHTML and OUTERHTML.
Method 1: Change the script used by the HTML text, preferably in the same script function. If you want to use a different script function when you are designing, for example, when calling an event such as OnMouseover and OnMouseout, you will make your script appear in one place. Here, you need to know that every time you perform a script function, the HTML compiler always re-calculates the format of the existing text, and the location of the respective on the web. This way you may know why you want to write the script in a scripting function. (Of course, I don't want, you change your code writing style you now call a lot of functions.)
Method 2: When you need to change the contents of the document, use an HTML string type variable replace all the content you need to modify, and make a modification, not once once to change the content of the document. If you don't need HTML directory, you can consider using the Innertext property at this time. In the example below, the execution process of "slow" example is that each time the new text content is added to the document, and the HTML compiler calls once inNerText properties. Accelerating the speed of the web page, "fast" example only calls an inNerText property. Click to enter the demo page slow:
Divupdate.innerhtml = ""; for (var i = 0; i <100; i ) {divupdate.innerhtml = " This is a slow method! ";} Fast:
Var str = ""; for (var i = 0; i <100; i ) {STR = " is because of the use of strings! ";} divupdate.innerhtml = Str; need to be more For more information, please refer to Dynamic Content. About InnerText Discussion: In the DHTML object model, the addition of text content of the HTML document is done by inNerText. Again, W3C DOM also provides a method of implementing a function. If you want to add a node in the HTML document, then you can implement the CreateTextNode method in the DOM. To achieve a better and faster effect, but it is recommended to use the Innertext property. Method 3: Use the Innertext property to change your documentation. In the following example, how to use Innertext properties to increase the efficiency of the web page. Click to enter the demo interface slow:
Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); Node.createTextNode ("Using CreateTextNode ()); DivuPdate.Appendchild (Node (});
Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); node.innertext = "using innerText Property"; divupdate.Appendchild (node);} Using DOM to add Separate nodes: Before we have mentioned, add new content in the HTML document, to call HTML compilers, so during this time, it will inevitably be efficient. So, when adding new nodes, we combine the CreateElement and InsertAdjacentelement methods, not just call the InsertJaceEntelement method.
Method 4: Call the CreateElement and InsertAdjacentelement methods, which is fast than calling the InsertACenthtml method. Calling the InsertJacenthtml method, it may make your code look more beautiful, but we are not talking about art. Here, we call his method directly through the DOM to become more effective. Click to enter the demo interface slow:
For (var i = 0; i <100; i ) {divupdate.insertadjacenthtml ("beforeend", " uses INSERTADJACENTHTML () ");} Fast:
Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); node.innertext = "Uses insertjacentelement ()"; DivUpdate.insertAdjacentelement ("beforeend", node); } Add a new selection in SELECT: Usually in the demand for dynamic web pages, you will touch you need to add a new selection in the drop-down menu, but in general, we only need to add one or two, you can solve the problem. We can do it when we can do it. But what if you need to add hundreds of thousands of selection? At this time we need to use the InnerHtml method instead of calling CreateElement for each option that needs to be added. Method 5: When adding a large number of options for SELECT, use InnerHTML instead of adding a CreateElement. In the example below, a string is used. The content that needs to be added is negative with the format of the HTML document to the string, and then it is added to the corresponding Select as a text that needs to be added in the HTML page, just like the method we discussed. Instead of adding a
Var Opt; divupdate.innerhtml = ""; for (var i = 0; i <1000; i ) {str = "
Var arr = new array (1000); for (var i = 0; i <1000; i ) {arr [i] = "
