js代码优化

Posted 九门提督琪琪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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′;
    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越深,获取时间越长 

转自:http://www.cnblogs.com/hj4444/p/3985321.html

以上是关于js代码优化的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

如何优化C ++代码的以下片段 - 卷中的零交叉

从JVM的角度看JAVA代码--代码优化

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie