Client side js performance optimization tips tidy up
- 2020-03-26 23:01:13
- OfStack
Here are some tips for optimizing client-side JS performance:
1. About JS loop, loop is a common flow control. JS provides three loops: for (;;) , while(), for(in). Of the three loops, for(in) is the least efficient, because it requires a Hash key to be queried, so use the for(in) loop, for(;;) sparingly. , while() loop performance is basically flat. Of course, a for loop is recommended, and if the loop variable is increasing or decreasing, do not assign a value to the loop variable alone, but instead use the nested ++ or -- operator.
2. If you need to iterate over groups, you should cache the array length first. For (I = 0; I< Len. I++), put the array length into a local variable to avoid querying the array length multiple times.
3. Local variables are accessed faster than global variables because global variables are members of the window object and local variables are placed on the stack of functions.
Use eval as little as possible. It takes a lot of time to use eval each time, especially in a loop where json[I][variable]=1. Such statements can be made without eval.
5. Try to avoid nested queries, for obj1.obj2.obj3.obj4 statement, need to carry out at least 3 query operations, first check whether obj1 contains obj2, then check whether obj2 contains obj3, and then check whether obj3 contains obj4... This is not a good strategy. You should make the most of local variables and save obj4 as a local variable to avoid nested queries.
6. When making operators, try to use operation symbols such as + =, - =, * =, \=, etc., instead of direct assignment operation.
7. When you need to convert a number into a character, use the following: "" + 1. In terms of performance, when converting Numbers to characters, there is the following formula :("" +) > String () > The toString () > New String (). String() is an inner function, so it's fast. Whereas.tostring () is slower to query the function in the prototype, new String() needs to recreate a String object, which is the slowest.
Math.floor() or math.round () should be used when converting floating point Numbers to integers. Instead of using parseInt(), this method is used to convert strings to Numbers. And Math is an internal object, so math.floor () doesn't really have many query methods and call times, and is the fastest.
9. Try to create objects in JSON format instead of the var obj=new Object() method. The former performs better because it is copied directly, while the latter requires the constructor to be invoked.
10. When arrays are needed, try to use JSON syntax as well, which is to define arrays directly using the following syntax: [parrm,param,param...] Instead of using new Array(parrm,param,param...) This syntax. Because the syntax in JSON format is directly interpreted by the engine. The latter calls the constructor of the Array.
11. Regular expressions are used to perform cyclic operations on strings, such as replace and find. Because JS loop speed is relatively slow, and the operation of the regular expression is written in C API, performance is better.
Finally, as a general rule, for large JS objects, caching should be considered as much as possible because of the time and space overhead associated with creating them.
1. About JS loop, loop is a common flow control. JS provides three loops: for (;;) , while(), for(in). Of the three loops, for(in) is the least efficient, because it requires a Hash key to be queried, so use the for(in) loop, for(;;) sparingly. , while() loop performance is basically flat. Of course, a for loop is recommended, and if the loop variable is increasing or decreasing, do not assign a value to the loop variable alone, but instead use the nested ++ or -- operator.
2. If you need to iterate over groups, you should cache the array length first. For (I = 0; I< Len. I++), put the array length into a local variable to avoid querying the array length multiple times.
3. Local variables are accessed faster than global variables because global variables are members of the window object and local variables are placed on the stack of functions.
Use eval as little as possible. It takes a lot of time to use eval each time, especially in a loop where json[I][variable]=1. Such statements can be made without eval.
5. Try to avoid nested queries, for obj1.obj2.obj3.obj4 statement, need to carry out at least 3 query operations, first check whether obj1 contains obj2, then check whether obj2 contains obj3, and then check whether obj3 contains obj4... This is not a good strategy. You should make the most of local variables and save obj4 as a local variable to avoid nested queries.
6. When making operators, try to use operation symbols such as + =, - =, * =, \=, etc., instead of direct assignment operation.
7. When you need to convert a number into a character, use the following: "" + 1. In terms of performance, when converting Numbers to characters, there is the following formula :("" +) > String () > The toString () > New String (). String() is an inner function, so it's fast. Whereas.tostring () is slower to query the function in the prototype, new String() needs to recreate a String object, which is the slowest.
Math.floor() or math.round () should be used when converting floating point Numbers to integers. Instead of using parseInt(), this method is used to convert strings to Numbers. And Math is an internal object, so math.floor () doesn't really have many query methods and call times, and is the fastest.
9. Try to create objects in JSON format instead of the var obj=new Object() method. The former performs better because it is copied directly, while the latter requires the constructor to be invoked.
10. When arrays are needed, try to use JSON syntax as well, which is to define arrays directly using the following syntax: [parrm,param,param...] Instead of using new Array(parrm,param,param...) This syntax. Because the syntax in JSON format is directly interpreted by the engine. The latter calls the constructor of the Array.
11. Regular expressions are used to perform cyclic operations on strings, such as replace and find. Because JS loop speed is relatively slow, and the operation of the regular expression is written in C API, performance is better.
Finally, as a general rule, for large JS objects, caching should be considered as much as possible because of the time and space overhead associated with creating them.