您的位置：首页 > Web前端 > JavaScript

js代码优化

2014-09-23 00:52 127 查看
1、减少Jquery使用处理dom遍历和复杂的脚本场景时，jquery可能有很大的帮助，不过在处理简单的、直截了当的代码场景就会迟缓。尽可能的避免jquery对象创建，尤其在循环中。2、优化循环用被缓存的数组长度
优化前
for(vari=0;i<arr.length;i++){
//somecodehere
}

优化后
for(vari=0,len=arr.length;i<len;i++){
//somecodehere
}
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创建完后一次性的加入
//优化前
varlist=document.getElementById("list");
for(vari=0;i<10;i++){
varitem=document.createElement("li");
item.innerHTML="option"+(i+1);
list.appendChild(item);
}

//优化后
varlist=document.getElementById("list");
varfragment=document.createDocumentFragment();
for(vari=0;i<10;i++){
varitem=document.createElement("li");
item.innerHTML="option"+(i+1);
fragment.appendChild(item);
}
list.appendChild(fragment);
集中修改样式
优化前：
functionselectAnchor(element){
varchangeDiv=document.getElementById(element);
changeDiv.style.color=‘#093′;
changeDiv.style.background=‘#fff’;
changeDiv.style.height=’100px’;
}

优化后：
CSS:
changeDiv{
background:#fff;
color:#093;
height:100px;
}
JavaScript:
functionselectAnchor(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("mouseovermouseout",function(event){
if(event.type==="mouseover"){
//mouseover
}else{
//mouseout
}
});
9、Property深度object.name<object.name.name这个property越深，获取时间越长




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航