js代码优化

页面导航:首页 > 网络编程 > JavaScript > js代码优化

js代码优化

来源: 作者: 时间:2016-02-21 09:50 【

1、减少Jquery使用处理dom遍历和复杂的脚本场景时,jquery可能有很大的帮助,不过在处理简单的、直截了当的代码场景就会迟缓。尽可能的避免jquery对象创建,尤其在循环中。2、优化循环
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创建完后一次性的加入
集中修改样式
复制代码
优化前:
function selectAnchor(element){ 
var changeDiv = document.getElementById(element);
changeDiv.style.color = ‘#093′;
changeDiv.style.background = ‘#fff’;
changeDiv.style.height = ’100px’;
}
 
优化后:
CSS:
changeDiv {
background: #fff;
color: #093;
height: 100px;
}
Script:
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( "mouver", function( event ) {
    // mouseover
});
$elem.on( "mouseout", function( event ) {
    // mouseout
});
//优化后
$( "#elem" ).on( "mouseover mouseout", function( event ) {
    if ( event.type === "mouseover" ) {
        // mouseover
    } else {
        // mouseout
    }
});
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<