1. Respect the ownership of the object
Do not add attributes to instances or prototypes;
Do not add methods to instances or prototypes;
Do not redefine methods that already exist.
The best way to do this is to never modify objects that are not owned by you. Owning an object means that you created it, such as a custom type or object literal that you created yourself. Arrays and documents are obviously not yours, they exist before your code is executed.
2. Avoid global variables
Create a global variable at most, allowing other objects and functions to exist in it. Take a look at the following examples:
//两个全局量——避免！！
var name = “Nicholas”;
function sayName(){
alert(name);
}
This code contains two global quantities: the variable name and the function sayName(). In fact, you can create an object that contains both, as shown in the following example:
//一个全局量——推荐
var MyApplication = {
name: “Nicholas”,
sayName: function(){
alert(this.name);
}
};
3. Avoid comparing with null
If the value should be a reference type, use the instanceof operator to check its constructor;
If the value should be a base type, use typeof to check its type;
If you want the object to contain a specific method name, use the typeof operator to ensure that the method with the specified name exists on the object.
(Here I recommend my web front-end learning and exchange group: 675498134, whether you are a novice or a god, I welcome you to come and learn and communicate, and share dry goods from time to time, including the latest front-end materials and tutorials that I have compiled myself to give to you, and there are technical experts who explain front-end knowledge live every day. Beginners and advanced friends are welcome to learn and communicate together and make progress together. ）
4. Use constants
Although Javascrip{filter}t has no formal concept of constants, it is useful. This idea of separating data from application logic can change data without risking introducing errors. Take a look at the following examples:
var Constants = {
INVALID_VALUE_MSG: “Invalid value!”,
INVALID_VALUE_URL: “/errors/invalid.php”
};
function validate(value){
if (!value){
alert(Constants.INVALID_VALUE_MSG);
locatio{filter}n.href = Constants.INVALID_VALUE_URL;
}
}
5. Avoid global search
Probably the most important thing to optimize script performance is to pay attention to global lookups. Using global variables and functions is definitely more expensive than local because it involves searches on the scope chain. Take a look at the following function:
function updateUI(){
var imgs = document.getElementsByTagName(“img”);
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = document.title + ” image ” + i;
}
var msg = document.getElementById(“msg”);
msg.innerHTML = “Update complete.”;
}
The function may look perfectly fine, but it contains three references to the global document object. If there are multiple images on the page, the document reference in the for loop will be executed multiple times or even hundreds of times, each time a scope chain lookup will be performed. By creating a local variable pointing to the document object, you can improve the performance of this function by limiting a global lookup once:
function updateUI(){
var doc = document;
var imgs = doc.getElementsByTagName(“img”);
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = doc.title + ” image ” + i;
}
var msg = doc.getElementById(“msg”);
msg.innerHTML = “Update complete.”;
Here, first place the document object in the local doc variable; Then replace the original document with the rest of the code. Compared to the original version, the current function only has one global lookup, which is definitely faster.
6. Other precautions for performance
Native methods are faster - Whenever possible, use the native method instead of rewriting one yourself with Javascrip{filter}t yourself. The native method is written in a compiled language such as C/C++, so it is much faster than Javascrip{filter}t. The most forgotten thing about Javascrip{filter}t is the complex math that can be found in Math objects; These methods are much faster than any other method written with Javascrip{filter}t, such as sine and cosine.
Switch statements are faster - If you have a series of complex if-else statements, you can get faster code by converting them into a single switch statement. You can also further refine the switch statement by organizing the case statement in order from most likely to least likely.
Bit operators are faster - When performing mathematical operations, bit operations are faster than any Boolean or arithmetic operations. Selectively replacing arithmetic operations with bit operations can greatly improve the performance of complex calculations. Logic such as modulus, logic and sum logic may be considered to be replaced with bit operations.
|
Posted on 12/4/2017 8:23:14 PM
|
|
|
Posted on 12/5/2017 9:33:13 AM