Recently, I was writing a JavaScript framework and found that many details were not paid enough attention to. I am worried that long-term accumulation will lead to serious efficiency problems when the framework is actually applied. So I started to pay attention to some techniques for improving JavaScript efficiency, and I will share them with you here.
1. JavaScript is the only language that requires smaller code size, so we can use some tools to streamline and compress JavaScript code, such as JSMin, Packer, YUICompressor, etc. These tools replace local variable names with short variable names, such as parseFloat() with a(). Therefore, when we write JavaScript code, we should map each global variable to a local variable, such as var parseFloat = parseFloat;
2. Use JSLint to detect the JavaScript you wrote, and you can find a lot hidden in it question. JSLint is a JavaScript verification tool (not open source) that can scan JavaScript source code to find problems. If JSLint finds a problem, JSLint displays a message describing the problem and indicating the approximate location of the error in the source code.
3. When we write JavaScript, we often need to traverse an array. The code is as follows:
for (var i=0;i
//do something
}
Member of JavaScript Variables are determined at runtime, which results in the need to look up the array length property each time through the loop, so we can add a variable to store the array size:
var l = array.length;
for (var i=0;i//do something
}
This looks like a good optimization, but in fact we can do better:
var i=array.length;
while(i--){
//do something
}
This is because when these two lines of code are converted into assembly, the while statement requires fewer instructions. I will not explain it here. If you are interested, you can study assembly.
4. Since anyone in JavaScript can modify or add properties in Object.prototype, when we traverse the properties of an object, we should first use hasOwnProperty to make a judgment to avoid traversing the entire prototype chain and affecting efficiency. . For example:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//do something
}
}
5. When using undefined, first define a local variable undefined
var checkVal = function(val) {
var undefined;
return val !== undefined;
};
In the above code, if the local variable is not defined in advance, the global variable undefined is directly used for judgment. If the third party is elsewhere Defining a global variable undefined=3 will result in incorrect results.
6. When converting a non-string type variable into a string type, you can directly use
var str = (i "").replace(...);
This place will be slower if String(i) is used a lot of.
7. When defining an array, if you do not need to use array class sorting and other methods, but only perform general assignment and access, you should write directly
var array = {};
instead of
var array = new Array();
Otherwise this is as meaningless as writing var i = new Number(1) when defining a numeric variable
8. When using jQuery, try to execute multiple functions on the same object on the same line of code , for example:
$("p.neat") .addClass("ohmy").show("slow");
instead of
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");
Other tips include using DocumentFragment to optimize multiple appends, using firstChild and nextSibling instead of childNodes to traverse dom elements, etc.
For details, you can refer to this blog: http://www.nowamagic.net/librarys/veda/detail/363
This article also refers to this article: http://www.cnblogs.com/justinw /archive/2009/12/07/1618500.html