High performance JavaScript Note III (programming practice)

Avoid double evaluation

There are four standard functions that allow you to pass in a string of code before it is executed dynamically. They are: eval, Function, SetTimeout, setinterval

In fact, when you execute another piece of JavaScript code in JavaScript code, it results in a double evaluation of the performance cost, so in most cases it is not necessary to make eval and function functions, so it is best to avoid them. As for settimeout and SetInterval, it is recommended to pass in a function instead of a string as the first argument

Now SAFARI4 and Chrome's JavaScript engine caches code that uses eval and runs repeatedly, which is also a performance boost.

Using Object/array Direct Volume

Two benefits of using direct volume

1. Run faster
2. Save code, reduce file size (in fact, the greater the number of object properties or array items, the more obvious are the benefits of using direct quantities)

Don't repeat your work.

There are two ways to avoid duplication of effort

1. Lazy Loading
2. Conditional Pre-loading

Let's take an example to illustrate it.

        functionAddHandler (target,eventtype,handler) {if(Target.addeventlistener) {//DOM2 EventsTarget.addeventlistener (EventType, Handler,false); } Else{//IETarget.attachevent (' on ' +EventType, handler); }        }        functionRemoveHandler (target, EventType, handler) {if(Target.removeeventlistener) {//DOM2 EventsTarget.removeeventlistener (EventType, Handler,false); } Else{//IETarget.detachevent (' on ' +EventType, handler); }        }

In fact, when the page is loaded, you know which browser the user is using, but if there are 100 elements on the page that need to be added to the event binding, you need to judge 100 times (and in fact you just have to judge it)

Here's how to use lazy loading to try

        functionAddHandler (target, EventType, handler) {if(Target.addeventlistener) {//DOM2 EventsAddHandler =function(target, EventType, handler) {Target.addeventlistener (EventType, Handler,false); }            } Else{//IEAddHandler =function(target, EventType, handler) {target.attachevent (' On ' +EventType, handler); }} addHandler (target, EventType, handler);//call a new function        }        functionRemoveHandler (target, EventType, handler) {if(Target.removeeventlistener) {//DOM2 EventsRemoveHandler =function(target, EventType, handler) {Target.removeeventlistener (EventType, Handler,false); }            } Else{//IERemoveHandler =function(target, EventType, handler) {target.detachevent (' On ' +EventType, handler); }} removehandler (target, EventType, handler);//call a new function}

When you invoke a lazy load function, the first time is relatively slow, followed by a quick call every time, so lazy loading is the best choice when a function is not called immediately in the page

Another way is to use conditional preloading: Bill of lading is detected during script loading, not waiting for function to be called

        varAddHandler = Document.body.addEventListener?function(target, EventType, handler) {Target.addeventlistener (EventType, Handler,false); } :            function(target, EventType, handler) {target.attachevent (' On ' +EventType, handler);        }; varRemoveHandler = Document.body.removeEventListener?function(target, EventType, handler) {Target.removeeventlistener (EventType, Handler,false); } :            function(target, EventType, handler) {target.detachevent (' On ' +EventType, handler); };

-bit operation

The numbers in JavaScript are stored in 64-bit format, in the in-place operation, the numbers are converted to signed 32-bit format, each operation is the direct operation of the 32-digit number to get results, in fact, JavaScript bit operation is faster than other mathematical operations and Boolean operations

For example, to be clear

1, the 2 to take the mold, General people will write as follows

        if (i% 2) {            // is odd        else  {            // is even        }

But it would be quicker to write that down.

        if (I & 1) {            // is even        else  {            // is odd        }

2, bitmask (that is, using each bit of a single digit to determine whether the option is set up, thus effectively converting the number to a Boolean-valued array) sample code as shown below

        varOption_a = 1; varoption_b=2; varOption_c = 3; varOption_d = 4; varoptions = Option_a | Option_b | Option_c |Option_d; if(options&option_a) {            //option A is in the list and is processed processing        }        if(Options &Option_b) {            //option B is in the list and is processed processing}

Using native methods

No matter how your JavaScript is optimized, it is no faster than the native method provided by the JS engine, for the simple reason that the native methods already exist in the browser before you write the code, and are written in low-level languages, which means that the code has been compiled into machine code as part of the browser. Is it faster to start than your code?

Summary

High performance JavaScript Note III (programming practice)