JavaScript script performance optimization considerations_javascript skills

Loop is a very commonly used control structure, and most things rely on it to complete. In JavaScript, we can use three types of loops: for(;;), while(), and for(in). In fact, these three types of loops The efficiency of for(in) is extremely poor because it needs to query the hash key, so it should be used as little as possible. The performance of for(;;) and while loop should be said to be basically equivalent (when used in daily use).
In fact, how to use these two loops is very particular. I had some interesting situations in my testing, see the appendix. The final conclusion is:
If the loop variable is incrementing or decrementing, do not assign a value to the loop variable alone. You should use the nested or - operator when it is read for the last time.
If you want to compare with the length of the array, you should put the length attribute of the array into a local variable in advance to reduce the number of queries.
　Local variables and global variables
The access speed of local variables is faster than that of global variables, because global variables are actually members of the global object, and local variables are placed on the stack of the function among them.
　Not using Eval
Using eval is equivalent to calling the interpretation engine again to run the content at runtime, which takes a lot of time. At this time, function templates can be implemented using closures supported by JavaScript (for details about closures, please refer to the relevant content of functional programming)
　Reduce object search
Because of the interpretability of JavaScript, so a.b.c.d.e, you need to perform at least 4 query operations, first check a, then check b in a, then check c in b, and so on. Therefore, if such expressions appear repeatedly, such expressions should be kept as rare as possible as much as possible. You can use local variables to put them in a temporary place for querying.
This can be combined with looping, because we often need to loop based on the length of strings and arrays, and usually this length is unchanged. For example, each time a.length is queried, an additional operation must be performed, and If you set var len=a.length in advance, there will be one less query.
　String concatenation
　If you are appending a string, it is best to use the s =anotherStr operation instead of using s=s anotherStr.
If you want to connect multiple strings, you should use = less, such as
s =a;s =b;s =c;
It should be written as
s =a b c;
And if it is To collect strings, for example, if you perform = operation on the same string multiple times, it is best to use a cache. How to use it? Use JavaScript arrays to collect, and finally use the join method to connect, as follows
var buf = new Array();for(var i = 0; i 　Type conversion
Type conversion is a common mistake that everyone makes, because JavaScript is a dynamically typed language and you cannot specify variables type.
　1. Convert numbers into strings and use "" 1. Although it looks a bit ugly, in fact this is the most efficient, in terms of performance:
　("" ) > String() > . toString() > new String()
This is actually somewhat similar to the "direct quantity" below. Try to use internal operations that can be used at compile time to be faster than user operations used at runtime.
String() is an internal function, so it is very fast, while .toString() queries the function in the prototype, so it is not as fast. new String() is used to return an exact copy.
　2. Converting floating point numbers to integers is more error-prone. Many people like to use parseInt(). In fact, parseInt() is used to convert strings into numbers, not between floating point numbers and integers. , we should use Math.floor() or Math.round().
In addition, unlike the problem in object search in Section 2, Math is an internal object, so Math.floor() actually does not have much query method and calling time, and is the fastest.
3. For custom objects, if the toString() method is defined for type conversion, it is recommended to explicitly call toString(), because the internal operation will try the object's toString() after trying all possibilities. The method tests whether it can be converted into String, so calling this method directly will be more efficient.
　Use direct quantities
　In fact, this impact is relatively small and can be ignored. What does it mean to use direct quantities? For example, JavaScript supports using [param, param, param,...] to directly express an array. In the past, we all used new Array(param, param,...). Using the former is directly interpreted by the engine. , the latter requires calling an Array internal constructor, so it is slightly faster.
Similarly, var foo = {} is faster than var foo = new Object();, and var reg = /../; is faster than var reg=new RegExp().
　String traversal operation
To perform loop operations on strings, such as replacement and search, regular expressions should be used, because the loop speed of JavaScript itself is relatively slow, and the operation of regular expressions It is an API written in C language and has very good performance.
　Advanced Objects
　 Custom advanced objects and Date and RegExp objects will consume a lot of time in their construction. If it can be reused, caching should be used.
　DOM related
Inserting HTML
Many 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 innerHTML to insert your own HTML code into the page.
　Object query
Using [""] query is faster than .items(). This is the same as the previous idea of ​​reducing object search. Calling .items() adds one more time Queries and function calls.
　Create DOM nodes
Usually we may use strings to write HTML directly to create nodes. In fact, doing so
cannot guarantee the validity of the code
String operations Low efficiency
So you should use the document.createElement() method, and if there are ready-made template nodes in the document, you should use the cloneNode() method, because after using the createElement() method, you need to set it multiple times For the attributes of elements, using cloneNode() can reduce the number of attribute settings - similarly, if you need to create many elements, you should prepare a template node first.
Timer
If you are targeting code that is constantly running, you should not use setTimeout, but setInterval. setTimeout resets a timer each time.
Others
Script engine
According to my test, the efficiency of Microsoft's JScript is much worse than Mozilla's Spidermonkey, both in terms of execution speed and memory management, because JScript is basically not updated now. . But SpiderMonkey cannot use ActiveXObject
　File Optimization
File optimization is also a very effective method. Delete all spaces and comments and put the code into one line to speed up the download. Note, It is the download speed rather than the parsing speed. If it is local, comments and spaces will not affect the interpretation and execution speed.
Summary
This article summarizes some of the methods I have found in JavaScript programming to improve JavaScript running performance. In fact, these experiences are based on several principles:
It is faster to just use ready-made things on hand, such as local variables. Faster than global variables, direct variables faster than runtime construction of objects, etc.
Reduce the number of executions as much as possible, such as caching those that require multiple queries first.
Use built-in language features as much as possible, such as string links.
Use the APIs provided by the system as much as possible, because these APIs are compiled binary codes and have high execution efficiency
At the same time, some basic algorithm optimizations can also be used in JavaScript, such as adjusting the operation structure , we won’t go into details here. However, since JavaScript is interpreted, bytecodes are generally not optimized at runtime, so these optimizations are still very important.
Of course, some of the techniques here are also used in other interpreted languages, and you can also refer to them.