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 = "
Var str = "
Var arr = new array (1000); for (var i = 0; i <1000; i ) {arr [i] = "
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 = "ROW" i ", Cell" J;}} 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 = "ROW" i ", Cell " J;}} one is always for all: When your webpage uses the same script code multiple times, do not add code to the page of each request. My recommended approach is to save this script in a file, let each page requesting this code directly calling that file. This is already executed once by a client, then it will be written in this client's browser cache, and this part will not be downloaded when calling, thereby saving time.
Method 7: The script content that needs to be called multiple calls is stored in a file, and all web pages share this resource. Of course, this method can also be extended to the laminated style sheet (CSS). Usually the page of the same site has the same style, thereby involving a lot of styles. Save these settings together, as a shared resource appears in your site, which can improve the request speed of the web, while do not affect any effect. Don't make too many pages of dynamic effects: Various features in DHTML provide developers with a very broad development space, which makes our web page more dynamic. This is a great pioneer, but also more important, it reduces the number of script code in the web page. But the same, also brought the corresponding problem. When performing various effects in DHTML, each time you call the HTML compiler to recompile the code, even recalculate the specific location of each element in the web page. This part is often not so coordinated in time and performance overhead. So, try not to use more dynamic effects on a web page, which will speed up the speed of the web page. Method 8: Do not have too much dynamic effects in a page. This section has no code to demonstrate :) Learn to use data binding data binding is a very powerful function, the applicable case, for existing set of data, do not have to be called each time, but use similar to The function of XML Data Island is added to an existing HTML document. This way you don't have to provide a function similar to the various functions similar to production in the web, replaced by an overall index of a data. Maybe you don't quite understand the specific meaning of this sentence. For example, if you have a personal website, I hope that my life is coming all over, it is a huge project! With ordinary methods, each viewer wants to see your education, let's take a look at this process: he finds the corresponding function you provide on the web, click, send a request to the server, by verifying, in the database (If yes) find the information you need, download, the HTML compiler recompores the result, calculate the format of the web page (that is, the specific location), is displayed in front of your eyes. Wow! It is necessary to go to the server request result! If the server is very slow at this time? So our solution is the data binding, bind all the data to the client, and the viewer can do the same thing by requesting the server, and the efficiency is a few times a few times, more importantly, your webpage The annoying function button will save this, so you can browse locally.
Method Nine: Use data binding to provide more faster data resources for the client. This part has no code to demonstrate :) Do not provide a feature in DHMTL in Document, you can define properties yourself so that we can store more useful information with your own defined properties. For example, we can define an event called Mouseover, which triggers your defined function (similar to HTC) when the true OnMouseOver triggered. But don't remember, do not use such techniques in the Document object.
Method 10: It is best to use custom properties in the Window object. Click to enter the demo interface slow:
For (var i = 0; i <1000; i ) {var TMP; window.document.myproperty = "item" i; tmp = window.document.myproperty;} fast: for (var i = 0; i <1000 ; i ) {var TMP; window.myproperty = "item" i; tmp = window.myproperty;} About Class and CSS: If your web provides different reading style, this requires us to have a lot of definitions Different styles. The best way is to directly modify the style of this element, rather than changing the classname of this element.
Method 11: Change the element style, modify the element style, do not change its classname. This part has no code :) Write in the final top discussed some small skills, how to make the dynamic web page more quickly, this is absolutely used in our usual work. If you are an initial web design, then this article may not be suitable for you. If you have more good suggestions, good methods, good skills, I hope to make further communication with everyone. You can click on "Comment" on the left, stay there, or you can send me a letter, my personal mailbox is: onefi@frontfree.net
