- Try to avoid using the DOM. When the DOM needs to be reused, the reference to the DOM is first stored in the JavaScript local variable for reuse. Replace the Document.createelement/appendchild () method with a method that sets innerHTML.
- Eval () has a problem, the new Fuction () constructor is also, try to avoid using them.
- Deny using the WITH statement. It leads to an extra search for such a namespace when you reference this variable, and the code in with is completely unknown at compile time.
- Replace the for...in loop with a for () loop. Because the for...in loop requires the script engine to create a List with all the recyclable properties before it starts the loop, it needs to be checked more than once.
- Put the Try-catch statement outside the loop, not in the loop, because exceptions are rare, and are placed outside to avoid executing them every time.
- Even the Bible mentions this – not the whole world. The lifetime of a global variable runs through the entire script's life cycle, while the scope of the local variable disappears as the local namespace is destroyed. When a global variable is referenced in a function or elsewhere, the scripting engine needs to search the entire global namespace.
- FullName + = ' John '; FullName + = ' Holdings '; executes faster than fullName + = ' John ' + ' Holdings ';
- If you need to concatenate multiple strings, it's best to make them into an array and then call the Join () method to do this. This is especially effective when generating HTML fragments.
- For a simple task, it is best to implement it using the basic operating method, rather than using a function call. such as Val1 < val2? Val1:val2; execute faster than Math.min (Val1, val2); Myarr.push (newele); slower than myarr[myarr.length] = Newele;
- Passing a reference to a function as a parameter to settimeout () and setinterval () is preferable to passing the function name as a string parameter (hard-coded). For example, SetTimeout ("SomeFunc ()", 1000) performs less efficiently than SetTimeout (SomeFunc, 1000)
- Avoid using DOM operations when traversing operations. The queue of DOM elements obtained by this method like getElementsByTagName () is dynamic, and it is possible that it has been changed when you have not traversed it. This can lead to a dead loop.
- When you iterate over the members (properties or methods) of an object, the reference to them is stored first. For example var getTags = document.getElementsByTagName; GetTags (' div ');
- In any code snippet, a reference to the local variable is placed outside the scope of the local variable. For example function foo (arr) {var a = ' something ';
The variable ' A ' is an out-of-range variable for the following paragraph, and the reference to that variable is useful in many cases. for (var i = 0, j = A, Looplen = arr.length; i < Looplen; i++) {//do Something}}
- for (var i=0; i < somearray.length; i++) {...} The execution efficiency is slower than for (Var i=0, looplen=somearray.length; i<looplen; i++) {...}.
- Add cache control expiration and maximum survival time tokens in HTTP header information.
- Optimize CSS. Instead of using the @import method, use the <link> method.
- Use CSS technology to optimize your picture resources
- Compress. js and. css files in gzip mode. If you are using Apache, set the compression method in. htaccess, and your HTML, XML and JSON will also be compressed. Addoutputfilterbytype DEFLATE text/html text/css text/plain text/xml application/x-javascript Application/json
- Use the JavaScript compression tool. In addition to using Yui and Jsmin, you can also try Google Closure.
- Optimize the various resources on each page, split them onto each subdomain, so they can be downloaded in parallel.
- Put the CSS style sheet at the top of the page so that it can be easily parsed by browsers including IE.
- Try to keep the DOM structure as simple as possible. The size of the DOM affects related operational efficiencies, such as lookups, traversal, and DOM changes. document.getElementsByTagName (' * '). Length The smaller the value the better.
- Note The selector you are using. For example, if you want to get a direct sub-element under UL, use jquery ("ul > li") instead of using jquery ("ul Li")
- When switching the visibility of an element (display), remember that element.css ({Display:none}) is faster than Element.hide () and Element.addclass (' Myhiddenclass '). Unless in a loop, I choose Element.addclass (' Myhiddenclass '), which makes the code more concise – Don't use inline CSS and JavaScript.
- When you have finished using the reference variable to the DOM, set it to null.
- When using Ajax, get performs more efficiently than post. So try to use GET mode. Just be aware that IE only allows you to transfer 2K of data with get.
- Be careful with scripting animations. Without hardware support, animations perform very slowly. Try to avoid using animations that have no real value.
- If your background-image is too small for this picture's container, avoid using background-repeat. If your background image needs to be filled back and forth many times to fill the background, it is unwise to set the Background-repeat property to Background-image and Repeat-x or repeat-y to achieve the effect of filling the background. The efficiency of this filling method is particularly low. You should try to use a picture large enough to do background-image and use Background-repeat:no-repeat.
- Do not use <table> when layout. <table> needs to be drawn several times before the browser can completely draw it out. Because <table> in the DOM is a rare occurrence, the output of an element that affects the display effect of the previous output. For tabular data, you can use table-layout:fixed; This is a more efficient realistic algorithm, according to the CSS 2.1 Technical instructions, this way can let the table line of output.
- Use the original JavaScript as much as possible. Restrict the use of JavaScript frameworks.
30 Tips to improve Web program execution efficiency
