JavaScript avoids sharing tips and tricks for repeated code execution
- 2020-03-30 02:41:13
- OfStack
I love going to large websites and looking through their source code, hoping to find patterns that I can apply to my code, or tools and techniques I've never heard of before. However, when I look at the source code of these large sites, I often find a problem, that is the repeated code execution, repeated function application. Here are some of the problems you found when you looked at their source code, and I'm going to share them with you in the hope that you'll be able to write your JavaScript more succinct and efficient.
Duplicate collection elements
The most common problem I see in their JavaScript code is repeated collection elements. While the jQuery selector engine or querySelectorAll are fast to execute, repetitive work can take up time and resources. The problem is very simple, and the solution is as follows:
We do this every day, but it needs to be reinforced. Of course, some repetitive actions are unavoidable (such as loading a page with ajax), but in these cases, it's best to use an event proxy rather than pull the content directly.
Repeated conditional judgment
Repetitive conditional calculations are common, but there is usually a general pattern to avoid them. You might see a piece of code that says:
This is possible, but not the most efficient code, and the above conditions may be computed multiple times. It would be better to write it as follows:
There is only one condition, and the method or variable is returned as a result when the condition is evaluated!
Duplicate object creation
Repetitive object creation is more difficult to find than repetitive operations, and is often expressed in regular expressions. Take a look at this code:
The code above creates a new (but identical) regular expression object over and over again, which you can avoid if you create the object outside of the function:
In the above example, the regular expression object was created only once, but used multiple times -- saving a lot of CPU processing.
This is just a few of the examples that I often see from other programmers that have repetitive problems. Do you have any of those?
Duplicate collection elements
The most common problem I see in their JavaScript code is repeated collection elements. While the jQuery selector engine or querySelectorAll are fast to execute, repetitive work can take up time and resources. The problem is very simple, and the solution is as follows:
//
$$(".items").addClass("hide");
//. And then...
$$(".items").removeClass("hide");
//
var items = $$(".items");
//. Use the reference variable from here!
We do this every day, but it needs to be reinforced. Of course, some repetitive actions are unavoidable (such as loading a page with ajax), but in these cases, it's best to use an event proxy rather than pull the content directly.
Repeated conditional judgment
Repetitive conditional calculations are common, but there is usually a general pattern to avoid them. You might see a piece of code that says:
var performMiracle = function() {
//If the browser supports feature A...
if(features.someFeature) {
}
//. If not supported
else {
}
};
This is possible, but not the most efficient code, and the above conditions may be computed multiple times. It would be better to write it as follows:
var performMiracle = features.someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff
};
There is only one condition, and the method or variable is returned as a result when the condition is evaluated!
Duplicate object creation
Repetitive object creation is more difficult to find than repetitive operations, and is often expressed in regular expressions. Take a look at this code:
function cleanText(dirty) {
//Remove the SCRIPT tags
clean = dirty.replace(/<script[^>]*>([sS]*?)</script>/gi, "");
// Do some more cleaning, maybe whitespace, etc.
return clean;
}
The code above creates a new (but identical) regular expression object over and over again, which you can avoid if you create the object outside of the function:
var scriptRegex = /<script[^>]*>([sS]*?)</script>/gi;
function cleanText(dirty) {
// Get rid of SCRIPT tags
clean = dirty.replace(scriptRegex, "");
// Do some more cleaning, maybe whitespace, etc.
return clean;
}
In the above example, the regular expression object was created only once, but used multiple times -- saving a lot of CPU processing.
This is just a few of the examples that I often see from other programmers that have repetitive problems. Do you have any of those?