浅析如何提高JavaScript性能

最近看了一本国外关于网页JS性能提升的书，在这里进行一下总结。

1、使用无阻塞脚本：

    （1）延迟的脚本：Defer属性-等待页面完成后执行（注意：并不是所有浏览器都支持该属性）

            使用方法：

            <script defer>  ...... </script>

  （2）动态脚本：推荐方法

          最简单方法：

function loadScript(urlS,callback){
      //动态加入脚本到
        var script  = document.createElement("script");
        script.type="text/javascript";
        if(script.readyState){  //IE
           script.onreadystatechange = function(){
              if(script.readyState == "loaded" || script.readyState == "complete"){
                  script.onreadystatechange = null;
                  callback();
              }            
           }
        }else{
          script.onload = function(){
              callback();
          };
        }

        script.src = urlS;
        $("head")[0].appendChild(script);
}

          高阶方法：使用github提供的LazyLoad等类库

  （3）使用XHR对象下载JavaScript代码并注入页面中：不推荐

2、使用定时器让出时间片段：停止执行JavaScript，使UI线程有机会更新，然后再继续JavaScript的执行

3、更新一大段HTML，推荐使用方法为原生的innerHTML，速度在大多数浏览器上表现都比其他更新方法快

4、循环条件控制下，尽量避免读取其length属性，即避免

     for(var i;i<coll.length;i++){ ......  }

5、减少重绘和重排操作：尽可能的合并多次对DOM和样式的修改，最好能一次更改完毕

6、使用时间委托来减少事件处理器数量：

    具体写法请参考文章：https://mp.csdn.net/postedit/88992106

7、避免使用eval()和Function()构造器双重求职带来的性能消耗

8、尽量使用原生的方法以及Object\Array类型直接赋值，即推荐
   

var  objecttest = {

     name:"test",

     count:50

  };

9、setTimeout()和setIterval()传递函数而不是字符串作为参数

10、尽可能的合并JavaScript文件，减少加载开销

11、使用YUICompressor等工具进行JS压缩，好的压缩工具可以看https://my.oschina.net/editorial-story/blog/853790文章介绍

      YUICompressor使用方法：

拿上面那个function loadScript(urlS,callback)的代码做例子，这个单独成为一个js文件的大小为：648字节

（1）下载YUICompressor相关jar包

（2）需要jdk支持，这个一般应该都会配置了jdk环境了，不会的自行百度

（3）进入cmd,对需要压缩的文件输入命令：

（最后在你指定的目录就会生成对应的压缩文件，这里压缩成test.js后，大小变成了290字节）

（4）我们可以看看压缩后的代码变成如下：

function loadScript(b,c){var a=document.createElement("script");a.type="text/javascript";if(a.readyState){a.onreadystatechange=function(){if(a.readyState=="loaded"||a.readyState=="complete"){a.onreadystatechange=null;c()}}}else{a.onload=function(){c()}}a.src=b;$("head")[0].appendChild(a)};