js代码优化

1、减少Jquery使用

处理dom遍历和复杂的脚本场景时，jquery可能有很大的帮助，不过在处理简单的、直截了当的代码场景就会迟缓。尽可能的避免jquery对象创建，尤其在循环中。

2、优化循环

用被缓存的数组长度

优化前for (var i = 0; i < arr.length; i++) {    // some code here}优化后for (var i = 0, len = arr.length; i < len; i++) {    // some code here}

3、if/else和swith语句

• 如果只是1或者2个语句，那if/else性能更好点
• 如果3个或者3个以上，那swith更好，这个可以通过测试来验证（测试地址）

4、缓存dom元素、jquey对象、对象/数组值

5、减少reflow

对dom的每次改变都会有一个重大的性能成本造成页面reflow

• 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行
• 先将元素从document中删除，完成修改后再把元素放回原来的位置
• 将元素的display设置为”none”，完成修改后再把display修改为原来的值
• 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入

  //优化前var list=document.getElementById("list");for(var i=0;i<10;i++){var item=document.createElement("li");item.innerHTML="option "+(i+1);list.appendChild(item);}//优化后var list=document.getElementById("list");var fragment=document.createDocumentFragment();for(var i=0;i<10;i++){var item=document.createElement("li");item.innerHTML="option "+(i+1);fragment.appendChild(item);}list.appendChild(fragment);

• 集中修改样式

  优化前：function selectAnchor(element){ var changeDiv = document.getElementById(element);changeDiv.style.color = ‘#093&PRime;;changeDiv.style.background = ‘#fff’;changeDiv.style.height = ’100px’;} 优化后：CSS:changeDiv {background: #fff;color: #093;height: 100px;}javaScript:function selectAnchor(element) {document.getElementById(element).className = ‘changeDiv’;}

6、避免全局的搜索

var $button=$(".button");$buttons.find( "a.mybutton" );替代$( "a.mybutton" );

7、优先dom搜索，然后再过滤

• 优先使用原生的getElementById、getElementsByTagName
• 例如.find( "a" ).filter( "[href=*'url_fragment']" )替换.find( "a[href=*'url_fragment']"

8、绑定多个事件到一个元素

//优化前var $elem = $( "#element" );$elem.on( "mouSEOver", function( event ) {    // mouseover});$elem.on( "mouseout", function( event ) {    // mouseout});//优化后$( "#elem" ).on( "mouseover mouseout", function( event ) {    if ( event.type === "mouseover" ) {        // mouseover    } else {        // mouseout    }});

9、Property深度

• object.name<object.name.name
• 这个property越深，获取时间越长