Clever Use of the function's inert loading to improve javascript code performance

Source: Internet
Author: User

I want to share with you an article about how to skillfully use the inert loading of functions to improve the javascript code performance. I hope this tutorial will be helpful to you.

In JavaScript code, because of the behavior differences between browsers, we often include a large number of if Statements in the function to check the browser features and solve the compatibility problem between different browsers. For example, the most common function for adding events to a dom node is:
 

The Code is as follows: Copy code
Function addEvent (type, element, fun ){
If (element. addEventListener ){
Element. addEventListener (type, fun, false );
}
Else if (element. attachEvent ){
Element. attachEvent ('on' + type, fun );
}
Else {
Element ['on' + type] = fun;
}
}

Each time you call the addEvent function, it checks the capabilities supported by the browser. First, it checks whether the addEventListener method is supported. If not, it checks whether the attachEvent method is supported, if not, use the dom level 0 method to add events. In this process, the addEvent function must be called every time. In fact, if the browser supports one of the methods, it will always support it, there is no need to detect other branches. That is to say, the if statement does not have to be executed every time and the code can run faster.

Solution 1:

The solution is called the inert loading technique.
The so-called inert loading means that the if branch of the function is executed only once, and then the supported branch code is directly entered when the function is called. There are two methods to implement inert loading. The first method is to perform secondary processing on the function itself during the first call. This function will be overwritten as a function that meets the branch conditions, in this way, the call to the original function does not need to go through the Execution Branch. We can use the following method to overwrite the addEvent () with the inertia load ().

The Code is as follows: Copy code

Function addEvent (type, element, fun ){
If (element. addEventListener ){
AddEvent = function (type, element, fun ){
Element. addEventListener (type, fun, false );
}
}
Else if (element. attachEvent ){
AddEvent = function (type, element, fun ){
Element. attachEvent ('on' + type, fun );
}
}
Else {
AddEvent = function (type, element, fun ){
Element ['on' + type] = fun;
}
}
Return addEvent (type, element, fun );
}

In this inert addEvent () load, each branch of the if statement will assign a value to the addEvent variable, effectively overwriting the original function. The last step is to call the new function. When addEvent () is called next time, the newly assigned function is called directly, so that the if statement is no longer executed.


Solution 2:

The second method to implement inert loading is to specify an appropriate function when declaring a function. In this way, the performance will not be lost when the function is called for the first time, but the performance will be lost only when the code is loaded. This is the addEvent () that is rewritten based on this idea ().

The Code is as follows: Copy code
 
Var addEvent = (function (){
If (document. addEventListener ){
Return function (type, element, fun ){
Element. addEventListener (type, fun, false );
}
}
Else if (document. attachEvent ){
Return function (type, element, fun ){
Element. attachEvent ('on' + type, fun );
}
}
Else {
Return function (type, element, fun ){
Element ['on' + type] = fun;
}
}
})();

The technique used in this example is to create an anonymous self-execution function. Different branches are used to determine which function should be used for implementation. The actual logic is the same, the difference is that a function expression (using var to define a function) and an anonymous function are added. In addition, each branch returns a correct function and assigns it to the variable addEvent.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.