It can be done by https://jsbench.me/ The test website completes the performance test .
One . Be careful with global variables
1. Global variables are defined in the global execution context , Is the top of all scope chains , Variables not found in the culture scope are queried in the global variables , So the query is
Time consuming .
2. The global execution context always exists in the context execution stack , Until the program exits .
3. If a variable with the same name appears in a certain and regional scope, it will obscure or pollute the global .
Next, through the code to analyze the next Global variable storage and regional variable storage Performance comparison regional variable storage is faster
Two . Cache global variables
Cache global variables that cannot be avoided in use to the culture , As shown in the figure below, the local variable cache is faster than the global variable cache
3、 ... and . Add a method through the prototype
As shown in the figure below, the implementation speed of the new method through the prototype chain is relatively fast
Four . Avoid the closure trap
Closure features :
1. The outside has a reference to the inside
2. Access the data of the internal scope in the external scope
As shown in the figure below , Call function foo,foo The function points to the inside fn The existence of , That is to say, the external refers to the internal reference
When calling foo When a function , We're in foo The scope can access foo Inside name Variables , That is, the external scope accesses the data of the internal scope
As shown in the figure below, improper use of closures can easily lead to memory leaks
First ,btn The element itself exists in dom On node , It's just using btn1 This variable is stored inside the function , So onclick Events are the outside pointing to the inside , Full
That's the first thing about closures ,onclick When the event is called , The scope is a separate scope , Follow foo Scope is not a scope , It uses foo do
Use the el, So satisfy the second of closures . There's a problem with this code , According to our previous GC The reference mechanism of garbage collection ,btn This dom Object is referenced 2 Time ,
Once in html in , Once in foo In variables , If we take this dom Node from html Delete , It is equivalent to reducing one reference , But in foo There's another internal reference
It won't disappear , That's why garbage can't be recycled , That's what we call a memory leak .
The solution is as follows , When the operation is finished, put btn1 Set as null
5、 ... and . Avoid using property access methods
According to JS Characteristics of , All the properties and methods inside the constructor are exposed to the outside , Try to avoid using method return properties inside constructors , It's about going directly to
Properties , As shown in the figure below , Obviously Direct access to properties is faster .
6、 ... and .for Loop optimization
As shown in the figure below ,
7、 ... and . Choose the best loop method
As shown in the figure below , If we just traverse the array data ,foreach It works best , The second is for, And finally for in
8、 ... and . File fragmentation optimization node added
As shown in the figure below , The new file fragment node is faster
Nine . Clone optimizes node operations
Cloning is mainly about adding Dom Node , It can be based on the fact that there are similar Dom Node , Make a copy of , So as to reduce the consumption of efficiency, as shown in the figure below , clone DOM Node ratio
establish DOM Nodes should be faster .
Ten . Direct quantity substitution new object
As shown in the figure below ： It's better to define arrays directly with variables than with new Object The way to build an array is obviously faster