Reprint URL: http://www.cnblogs.com/developersupport/p/3491370.html First, let the code concise: Some simple expression will also produce a good optimizationeg:x=x+1, without affecting the function can be abbreviated to x + +; second, the variable name method name as far as possible without affecting the semantics of the case simple. (You can choose to name the first letter)eg: the length of the definition array can be named: Arrlen and does not need to be taken as arraylength. third, on the JS cycle, the cycle is a common process control. JS provides three loops: for (;;), while (), for (in). In these three loops, for is the least efficient because it needs to query the hash key, so you should try to use as little as possible for the for (;), and while () loop performance is basically flat. Of course, a for loop is recommended, and if the loop variable is incremented or decremented, do not assign a value to the loop variable alone, but instead use a nested + + or – operator. Iv. If you need to iterate through an array, you should cache the length of the array, put the array length into local variables, and avoid querying the array length multiple times. because we often have to loop according to the length of the string, array, and usually this length is constant, such as every query a.length, an additional operation, and the Len=a.length Var, then one less query. try to choose Local variables instead of global variables. local variables are accessed faster than global variables because the global variable is actually a member of the Window object, and the local variable is placed in the stack of the function. Vi. use of eval as little as possible. It takes a lot of time to use Eval each time, and a function template can be implemented using a closure supported by JS. Vii. Reducing object lookupsbecause of the explanatory nature of JavaScript, A.B.C.D.E requires at least 4 queries, checking A and then checking the B in a, and checking the C in B, so down. So if the expression repeats itself, as long as it is possible, the expression should be as few as possible, you can use the local variable, put it in a temporary place to query. Eight, string connection. If you are appending strings, it is best to use the S+=ANOTHERSTR operation instead of using S=S+ANOTHERSTR. If you want to concatenate multiple strings, you should use less than + =, such as S+=a;s+=b;s+=c, should be written s+=a + B + C;It is best to use a cache if you are collecting strings, such as multiple + = operations on the same string. How to use it? Use a JavaScript array to collect, and finally join using the Join method, as followsvar buf = new Array (), for (var i = 0; i <; i + +) {buf. push (I.to String ());} var all = buf. Join (""); Nine, type conversion1. Convert the number to a string, apply "" + 1, although it looks uglier, but in fact this efficiency is the highest, performance said: ("" + "> string () >. to string () > new string ()try to use the internal operations that you can use at compile time faster than the user actions that are used at run time. string () is an intrinsic function, so it is fast, and. to String () queries the function in the prototype, so the speed is inferior, and the new string () is used to return an exact copy. 2. Floating-point numbers are converted to integers, this is more error-prone, many people like to use parseint (), in fact parseint () is used to convert a string into a number, rather than floating-point numbers and integers between the conversion, we should use Math.floor () or math. Round (). Math is an internal object, so math. Floor () In fact, there is not much query method and the time of the call, the speed is the fastest. 3. For custom objects, if the to string () method is defined for type conversion, it is recommended that you explicitly call to String (), because the internal operation attempts to convert the object's to string () method to a string after attempting all possibilities. So it would be more efficient to call this method directly . 10, try to function as JSON format to create the object, not the Var Obj=new object () method. because the former is a direct copy, and the latter needs to call the constructor, the former performs better. 11, when you need to use the array, also try to use the JSON format syntax,using the JSON-formatted syntax, the array is defined directly using the following syntax: [Parrm,param,param ...] instead of using the new array (Parrm,param,param ...). This syntax. Because the syntax used in JSON format is directly explained by the engine. The latter needs to call the constructor of the array. 12. Use regular expressions to loop through strings, such as replace and find. because JS cycle speed is relatively slow, and the operation of the regular expression is written in C API, the performance is better. 13. Inserting HTMLMany people like to use document. write in JavaScript to generate content for the page. In fact, this is less efficient, if you need to insert HTML directly, you can find a container element, such as specifying a div or span, and set their inner HTML to insert their own HTML code into the page. 14. Object Queryusing ["] queries is faster than. Items () 15. TimerIf you are targeting code that is constantly running, you should not use set Timeout, but should be set Interval. Set timeout to reset one timer at a time. 16. Minimize DOM callsin web development, one of the most important functions of JavaScript is to manipulate the DOM. However, the manipulation of the DOM is very expensive because it causes the browser to perform a reflow (reflow) operation. We should try to reduce DOM operations as much as possible. reflow operations can occur mainly in several cases:* Change the size of the form* Change Font* Add remove style sheet block* Content Changes even if the input box input text* CSS Virtual class is triggered such as: hover* Change the class Name of the element* When a new or deleted operation or content change is performed on the DOM node. * When setting a style style dynamically (such as element. Style. Width= "10px"). * When obtaining a dimension value that must be computed, such as accessing offset Width, client height, or other CSS values that need to be computedthe key to solving this problem is to limit the number of backflow caused by DOM operations:1. Before working on the current DOM, do as much preparation as possible, ensuring that n times are created and 1 writes are made. 2. Before manipulating the DOM, remove the elements to be manipulated from the current DOM structure:2.1. Remove child () or replace child () to achieve a true deletion. 2.2. Set the display style for this element to "none". 3.CSS Partanother case that often causes reflux is to modify the appearance of elements through the style property, such as element. style. Background Color = "Blue";each time you modify the style property of an element, you will definitely trigger the reflow operation, to resolve this problem:3.1. Replace the style with the change of class name. xxx = XXX way. 3.2. Use style. Csstext = "; write-once style. 3.3. Avoid setting too many inline styles3.4. Add the outside elements of the structure as far as possible to set their position to fixed or absolute3.5. Avoid using tables to lay out3.6. Avoid using JavaScript syntax and code in CSS (IE only)4. Cache the obtained DOM data. This method is especially important for obtaining properties that trigger a reflow operation, such as offset width. 5. When working with HTML collection objects, the number of accesses should be minimized as much as possible, and the simplest you can do is to cache the length property in a local variable, which can greatly improve the efficiency of the loop. 17. Refactoring < SCRIPT > and < STYLE > Call mode or merge JS file to optimize the number of requests and use external links as far as possible to referencewe often see this tag code in the header of an HTML file:< script src= "/scripts/a.js" ></script >< script src= "/scripts/b.js" ></script >< script src= "/scripts/c.js" ></script >Most of the cases, the above code can be simplified into:where d.js refers to a. js/b. js/c. js. Written by the Document.Write method. 18, for the large JS object, because the time and space to create the cost is relatively large, so should try to consider the use of caching. 19. Put the script at the bottom. scripts are typically used for user interaction, and it is recommended that you load the JS file after the page is loaded. So, the script and CSS are just the opposite, the script should be placed at the bottom of the page. 20. Remove white space from JavaScriptyou can use related tools to remove blank annotations, etc., and to rename all the names to one or two letters will bring significant improvements. (but need to leave a non-acceptance of the backup file, easy to maintain later) 21, in the version upgrade or do some CSS, JS and other adjustments, the cache causes the user can not display the updated style, unless the user manually upgrade the cache, but almost all users do not want to access this site to manually clear the cache, because users do not know whether the cache is a problem, In the final analysis, the user is thinking that your page has problems and cannot be accessed properly. We can add the version number after the introduced file name, which is different from the previous version (typically the update date). The code is as follows:< link rel= "stylesheet" type= "Text/css" href= "reset.css?date=20140829" >
JavaScript Performance Optimizations
