Optimization issues related to javascript programs

Optimization issues related to javascript programs

These are some of my experiences when writing code. I summarized them for everyone. There is no order. I wrote them as soon as I thought of them.

1. Use local variables to avoid using global variables. For example,
function test(){
var s = document.getElementById('aaa');
          s.innerHTML = document.body.clientHeight;
                  s = d.getElementById('aaa');
        s.innerHTML = d.body.clientHeight;
    }
The advantage of local variables is that it reduces the scope chain search
I suggest using local variables if there are two references

2. Avoid using with (this estimate of the earth Everyone knows)
I understand the reason is that with will create its own scope, which lengthens the original scope chain, making the code executed in the with block slower. It seems to save code in writing, but in fact On the contrary, the access becomes longer and more cumbersome, and the performance decreases. ClientHeight = '200px';
                     It can be written as
              function test(){                     var ds = document.body;                    ds.clientWidth = '200px'
                                                                                                                                                                             var as = document.getElementsByTagName('div');
for(var i=0,l My method is not used once
for( var i=0,ci;ci=as[i++];){}When nodeList is completed, it will be false and it will end
Advantages: No length calculation, no assignment in the loop, less code, i++ is included in the judgment
        （注意：这个方式用在nodelist里可以，如果你用到array里，可会有问题的，数组里有个0后者null什么的就瞎了)
        
4.别用那么多个var， Just add a comma and you’re done
    var a =1;
    var b = 1;
      var c =1;
                                             b=1,
c=1;

5.innerHTML is the best choice
When adding elements to elements, it is best to use innerHTML

6.ie's removeChild is not easy to use
Generally when we delete an element, we will use elm.removeChild(subElm)
This is in ie It’s not easy to use, because under IE this only disconnects the element from the DOM tree, but does not actually delete it. It has now become an isolated node.
If you want to really delete it, you can do this
var ryc = document.createElement('div');
div.appendChild(subElm);
div.innerHTML = '';
div = null;
This way it is really deleted. Except for IE, you can use removeChild to achieve the effect

7. When binding events to multiple sibling elements, there is no need to bind events for each element. Bind them all, just bind them to their parent
For example
                                                                                                   ;/li>

sdf

sdf

sdf

Add that tedious and prone to overflow (IE)
In fact, as long as it is added to UL, the incident is the bubbling
Var UL = DOCUMENT.GetelementByid ('A');
Ul.Onclick = Function (e ){
                                                                                                                     //your code
                                         Try to use native methods, because native ones are compiled with c/c++ and they execute much faster than methods written in js

9. When appendChild is used for a long time, be sure to use docuemntfragment
For example
for(var i=0;i<1000;i++){
                                                                                               .createDocumentFragment();
for(var i=0;i<1000;i++){
                                                                                                                                                           

10 . if else uses >=3, then use switch, it is easy to read and has good performance

11. if<=3, don’t use if, use 3-element expression

12. if==1 , If you change && (if (a == 1) a = 2

A == 1 && (a = 2);

13. Calculate the position of the element. Browsers ie6 and above, ff3.1 and above, chrome, and opera (I only tested the latest) all support this
el.getBoundingClientRect returns an object, which are the values ​​of top, left, right, and bottom respectively

14. Regular Find without indexof
Var S = 'SDFSDFSDFAAASDFDSFS';
For (VAR I = 0; I & LT; 1000; I ++) {
s.indexof ('Aaa')}}}
Var S = 'sdfsdfaaaaaaa sdfdsfs'; For (var I = 0; i & lt; 1000; i ++) {
/aaa/.test (s)
}

15. Use non -capture in the regular regulations (? So fast

16. Set style of a certain element. It is easier to use cssText
el.style.cssText +=";postion:absolute;"
(note that the position before position cannot be removed, because IE does not have this; position cannot be recognized, and other browsers do not have this problem)

17. In new, when there are no parameters, the parentheses after the function name can be removed
new fn()==>new fn
new Image()==>new Image


Think of this much first, and then I will compensate when I think of it. If you think it is wrong, please mention it. You are welcome

The above is about the optimization issues of JavaScript programs. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!