Js极客之路 - 优化操作（性能优化）

    //bad
    var arr=[1,2,3,...];
    
    for(var i=0; i<arr.length; i++){
        ...code
    }
    
    //good
    var arr=[1,2,3,...],
        len=arr.length,
        i=0;
        
    for(; i<len; i++){
        ...code
    }

    //第一种：
    var a=‘12‘;
    console.log(typeof a);        //string
    a=parseInt(a);                //parseInt()、Math.floor()等
    console.log(typeof a);        //number
    
    //第二种：
    var a=‘12‘;
    a=a-0;        //-、*、/等
    console.log(typeof a);        //number
    
    //第三种（参考地址-http://www.w3school.com.cn/js/pro_js_operators_unary.asp）：
    var a=‘12‘;
    a = +a ;        //+、-、~等
    console.log(typeof a);        //number
    
    //第四种：
    var a=‘12‘;
    a = a >> 0 ;        //>>、>>>等
    console.log(typeof a);        //number
    
    听说第二种和第三种是性能快点，或许可以参照《将数字转变成字符串的几种方法》下别人的话。
    第四种计算过程参考：
        ①：https://msdn.microsoft.com/zh-cn/library/5s9e947e(v=vs.94).aspx
        ②：http://zhidao.baidu.com/link?url=lHM_2XsAX2N3zmaDwhA8IUivdkjhBO-9RLYg-qLRfTuh7qo2wJYaEZXi5mlu4VWPMSNtBL404448uJBxrrfK_Y-E4WDdhSgg31ofHAj72nC
    

    //第一种：
    var a=100;
    console.log(typeof a);        //number
    a=a.toString();                //toString()、toFixed()等
    console.log(typeof a);        //string
    
    //第二种：
    var a=100;
    a=‘‘+a;
    console.log(typeof a);        //string
    
    别人的话：从性能上来看，将数字转换成字符时，有如下公式：("" +) > String() > .toString() > new String()。String()属于内部函数，所以速度很快。而.toString()要查询原型中的函数，所以速度逊色一些，new String()需要重新创建一个字符串对象，速度最慢。

    //bad，假设num只在a函数里被使用
    var num=10;
    function a(){
        num++;
        ...code
    }
    a();

    //good
    function a(){
        var num=10;
        num++;
        ...code
    }
    a();

    //bad?
    if(con === 1) {return result1;}
    else if(con === 2) {return result2;}
    else if(con === 3) {return result3;}
    else if(con === 4) {return result4;}
    else if(con === 5) {return result5;}
    else if(con === 6) {return result6;}
    else if(con === 7) {return result7;}
    else if(con === 8) {return result8;}
    else if(con === 9) {return result9;}
    这段代码就会依次判断con是否等于1,2,3,4,5,6,7,8,9，如果是9的话，就会判断9次。
    
    //good?
    if (con <= 3){
        if(con === 1) {return result1;}
        else if(con === 2) {return result2;}
        else {return result3;}
    } else if(con > 3 && con <= 6){
        if(con === 4) {return result4;}
        else if(con === 5) {return result5;}
        else {return result6;}
    } else if(con <= 9){
        if(con === 7) {return result7;}
        else if(con === 8) {return result8;}
        else {return result9;}
    }
    这样我们通过三叉树的形式，就可以减少查找次数了，比如这里查找9次，分别判断 0~3,3~6,6~9,7,8,9，只需要6次。
    if-else除了通过这种树形组织编码以外，还有一个优化的地方。由于其顺序判断的逻辑，我们可以根据概率来，将概率比较大的判断放在前面，概率较小的放在后面，这样也可以减少平均查找长度（这个才是人可以做的）。

    //bad
    for(var i=0; i<1000; i++){
        var elem=document.createElement(‘p‘);
            elem.innerHTML=i;  
        document.body.appendChild( elem );
    }
    
    //good
    var html=[],
        i=0;    
    for(; i<1000; i++){
        html.push( ‘<p>‘+i+‘</p>‘ )
    }    
    document.body.innerHTML+=html.join(‘‘);

    //bad
    var oDiv=document.getElementById(‘test‘);
    oDiv.onclick=function(){
        this.style.background=‘red‘;
        this.style.fontSize=‘12px‘;
        this.style.border=‘1px solid #ccc‘;
    }
    
    //good
    var oDiv=document.getElementById(‘test‘);
    oDiv.onclick=function(){
        this.className=‘xxx‘
    }
    或者
    oDiv.onclick=function(){
        this.style.cssText=‘background: red; font-size: 12px; border: 1px solid #ccc;‘
    }

    例：页面有一个div(id="wrap")，div下面有100个span，现在需求是点击每个span，弹出span里的文本内容。
    //bad
    var aSpan=document.getElementById(‘wrap‘).getElementsByTagName(‘span‘),
        len=aSpan.length,
        i=0;
    for(; i<len; i++){
        aSpan[i].onclick=function(){
            alert( this.textContent )
        }
    }
    
    //good
    document.getElementById(‘wrap‘).onclick=function(e){
        alert( e.target.textContent )
    }

    //bad
    <rect width="20" height="20" fill="#F15C80" ></rect>
    <circle cx="40" cy="10" r="10" fill="#F15C80" ></circle>
    ...more    
        
    //good
    <g fill="#F15C80">
        <rect width="20" height="20" ></rect>
        <circle cx="40" cy="10" r="10" ></circle>
        ...more
    </g>

    //bad
    <path d="M165.381249999999994 -.5v400" stroke="#90ED7D" stroke-width="1.2"></path>

    //good
    <path d="M165.5 -.5v400" stroke="#90ED7D" stroke-width="1.2"></path>

    //bad
    var oRect=document.createElementNS(‘http://www.w3.org/2000/svg‘,‘rect‘);
    oSvg.appendChild(oRect);
    oRect.setAttribute(‘width‘,30);
    oRect.setAttribute(‘height‘,30);

    //good
    var oRect=document.createElementNS(‘http://www.w3.org/2000/svg‘,‘rect‘);
    oRect.setAttribute(‘width‘,30);
    oRect.setAttribute(‘height‘,30);
    oSvg.appendChild(oRect);

    //bad
    var oP=$(‘#test‘).find(‘p‘),
        oEm=$(‘#test‘).find(‘em‘);
    
    //good
    var oBox=$(‘#test‘),
        oP=oBox.find(‘p‘),
        oEm=oBox.find(‘em‘);