Home  >  Article  >  Web Front-end  >  Summary of how JavaScript improves code performance

Summary of how JavaScript improves code performance

伊谢尔伦
伊谢尔伦Original
2017-07-26 13:47:321180browse

Use string accumulation calculation style

Using the + operation will create a new string in memory and assign the connected value to it. Just assign the result to a variable.
In order to avoid connecting the intermediate variables of the result, you can use += to directly assign the result.

Code that runs slowly:

a += 'x' + 'y';

Code that runs faster:

a += 'x'; a += 'y';


Original Operations will be faster than function calls
Consider using alternative original operations in loops and functions where performance requirements are critical.
Code that runs slowly:

var min = Math.min(a, b); 
arr.push(val);

Code that runs faster:

var min = a < b ? a : b; 
arr[arr.length] = val;

Pass the function name when setting setTimeout() and setInterval() Not a string

If you pass a string to setTimeout() or setInterval(), the string will be eval calculated and cause slowness.
Use an anonymous function wrapper instead so that it can be interpreted and optimized at compile time.

Code that runs slowly:

setInterval(&#39;doSomethingPeriodically()&#39;, 1000); 
setTimeOut(&#39;doSomethingAfterFiveSeconds()&#39;, 5000);

Code that runs faster:

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

Avoid using unnecessary DOM references in objects

Don’t do this:

var car = new Object(); 
car.color = "red"; 
car.type = "sedan"

A better form:

var car = { 
color : "red"; 
type : "sedan" 
}

Clearest target speed, minimized scope Chain

Inefficient method:

var url = location.href;

An efficient form:

var url = window.location.href;

Try to use fewer comments in the script and avoid using long variable names
Keep comments as few as possible or avoid using comments, especially in functions, loops and arrays.
Comments unnecessarily slow down script execution and increase file size. For example:

Not recommended form:

function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}

Better way to write:

function someFunction() 
{ 
var name="somename"; 
}

Storage external variables of the application in the current scope
When a function is executed in the context of execution, an active object containing all local variables will be pushed to the front of the context chain.
In the scope chain, the slowest is the clear identification identifier, which means that local variables are the fastest. Reading and writing frequently used external variables will be significantly faster. This is especially noticeable for global variables and other deep identifier lookups.
Similarly, variables in the current scope (var myVar) are accessed faster than objects like properties (this.myVar).

Code that runs slowly:

function doSomething(text) { 
var ps = document.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

Code that runs faster:

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

If you need to access an element (such as head) in a large In the loop, it will be faster to use a local DOM access (such as get in the example).
Run faster code:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get(&#39;head&#39;); 
} 
}

Use variables to cache values ​​
Use local variables to cache values ​​where you do repeated work.
The following set of examples illustrates the broad significance of storing values ​​in local variables.

Example 1. Use variables to store mathematical functions in the loop body before calculation execution
Wrong method:

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}

Better processing:

var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}


Example 2. Save the length of the array using
Poor processing in a loop:
The length of the array will be recalculated every time

for (var i = 0; i < arr.length; i++) { 
// do something 
}

Better improvement:
A better way is to save The length of the array

for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}

In general, if it has been done once, we do not need to do unnecessary work repeatedly. For example, if the value of a calculated expression is used multiple times in a scope or function, saving it to a variable allows it to be used multiple times, otherwise we would overdo it by declaring a variable and assigning it a value that only applies once. So please keep these in mind.


The above is the detailed content of Summary of how JavaScript improves code performance. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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