Home > Web Front-end > JS Tutorial > Client-side js performance optimization tips organized_javascript skills

Client-side js performance optimization tips organized_javascript skills

WBOY
Release: 2016-05-16 17:17:27
Original
1019 people have browsed it

Here are some optimization tips for client-side JS performance:

1. Regarding JS loops, loops are a commonly used process control. JS provides three types of loops: for(;;), while(), and for(in). Among these three types of loops, for(in) is the least efficient because it needs to query the Hash key. Therefore, the for(in) loop should be used as little as possible. The performance of for(;;) and while() loops is basically the same. Of course, it is recommended to use a for loop. If the loop variable is incrementing or decrementing, do not assign a value to the loop variable alone. Instead, use the nested or -- operator.

2. If you need to traverse the array, you should first cache the array length var len=arr.length; for(i=0;i
3. The access speed of local variables is faster than the access speed of global variables, because global variables are actually members of the window object, while local variables are placed on the stack of the function.

4. Use eval as little as possible. Each time you use eval, it takes a lot of time, especially in a loop. Statements like json[i][variable]=1; do not need to use eval.

5. Try to avoid nested queries of objects. For the statement obj1.obj2.obj3.obj4, you need to perform at least 3 query operations. First check whether obj1 contains obj2, and then check whether obj2 contains obj3. , and then check if obj3 contains obj4... not a good strategy. You should try to make use of local variables and save obj4 in local variables to avoid nested queries.

6. When using operators, try to use operation symbols such as =, -=, *=, =, etc. instead of directly performing assignment operations.

7. When numbers need to be converted into characters, use the following method: "" 1. From a performance perspective, when converting numbers into characters, there is the following formula: ("" ) > String() > .toString() > new String(). String() is an internal function, so it is very fast. And .toString() needs to query the function in the prototype, so the speed is slower. new String() needs to re-create a string object, which is the slowest.

8. When you need to convert floating point numbers into integers, you should use Math.floor() or Math.round(). Instead of using parseInt(), this method is used to convert a string into a number. Moreover, Math is an internal object, so Math.floor() actually does not have many query methods and calling time, and is the fastest.

9. Try to use JSON format to create objects instead of var obj=new Object() method. Because the former copies directly, while the latter requires calling the constructor, the performance of the former is better.

10. When you need to use an array, try to use the JSON format syntax, that is, directly use the following syntax to define the array: [parrm, param, param...] instead of using new Array(parrm, param ,param...) this syntax. Because the syntax using JSON format is directly interpreted by the engine. The latter requires calling the Array constructor.

11. Use regular expressions to perform loop operations on strings, such as replacement and search. Because the loop speed of JS is relatively slow, and the operation of regular expressions is an API written in C, the performance is relatively good.

Finally, there is a basic principle. For large JS objects, because the time and space overhead during creation are relatively large, caching should be considered as much as possible.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template