javascript的性能优化tips

谈到javascript的性能优化，有好多点，比如把script放到离body闭合标签附近，合并多个script标签等等，还有一些代码的性能，for的性能不如while的性能好，用while模拟for循环等等等。

1.从加载开始

在浏览器中，js文件的执行和下载会阻塞css和dom的渲染，这是浏览器的单线程所致，后来chrome，ff等浏览器启用了
js文件的并行下载，然而js文件的运行还是会被阻塞，有的浏览器支持defer关键字。

<script type="text/javascript" defer>
    alert("defer");
</script>
<script type="text/javascript">
    alert("ok")
</script>
<script type="text/javascript">
    window.onload=function(){
        alert("onload");
    }
</script>

不支持defer的浏览器会输出defer，ok，onload,支持的会弹出ok，defer和onload,defer是在dom渲染之前的。
还可以把js文件的script标签用js动态加载。这样文件的下载执行就不会影响其他页面的处理过程。

另外，你可以监听script标签load事件，而ie触发一个readystatechange事件，而且有一个readyState，
它有5个状态，最主要的就是loaded和complete事件，然而ie的这两个事件表现又不一致，有时候又loaded事件没有complete，有时候反之。
那我们在用的时候就可以同时判断：

var script=document.createElement("script");
script.type="text/javascript";
script.onreadystatechange=function(){
    if (script.readyState=="loaded"||script.readyState=="complete") {
        script.onreadystatechange=null;//为了防止事件处理两次
        alert("script ok");
    };
}
script.src="file.js";
document.body.append(script);

2.数据存储的优化

如果外部数据在函数作用域内多次使用，最好用一个局部变量来表示，因为局部变量在函数作用域内的性能消耗是最少的，
函数作用域链中优先查找局部变量，全局变量的性能消耗相对较多。

var a=doucument.getElementById("aa");
document.body.onclick=function(){
    var temp=a;
    // temp to do something...            
}

3.dom操作的优化

javascript中存在的dom集合，如document.getElementsByTagName(''),document.links,document.images,document.forms,
document.forms[0].elements,他们都是类数组，有一个length属性，而在遍历的时候会重新查找计算，而把它们放到一个真正的数组里是一个优化方案。
或者可以把length用一个变量表示一下；

var col=document.getElementsByTagName('div');
var len=col.length;
for (var i = 0; i < len; i++) {
    //todo;
};

在选择dom的结构中，firstChild，nextSibling，previousSibling都是包含文本节点和注释节点，比如在我以前写的选择dom里面，就写了好几个nextSibling。在选取子元素的时候nextSibling比childNodes性能更节省，在ie下节省的性能更多，而jquery的children里面也是用的nextSibling选取的。
下面这个结构，img1的nextSibling是文本节点，如果自己过滤的话会产生性能消耗，现代浏览器提供了nextElementSibling，previousElementSibling等等，他们可以自动过滤文本节点和注释节点，从而提升性能，
ie6，7，8只支持children。

<img src="" id="img1">
<!-- zhushi -->
<img src="" id="img2">

在dom的选择中，querySelectorAll的特性比getElementById的性能好，比如这个结构里：

var b=document.querySelectorAll('img#img1,img#img2');

querySelectorAll比较方便，而循环迭代getElementById的性能就不怎么样了。浏览器支持就用吧。

4.for循环的优化

for循环的优化，在迭代1000次以上，用达夫设备比较快，基本思想就是用while代替for。而forEach比for循环还慢；
if else和switch相比，在条件多的时候用 switch条件少用if else 这也符合性能的考虑。
递归的优化，可以将递归转化为迭代。为了防止递归做一些重复的计算，可以建立缓存如下，视实际情况选用。称为制表技术。这里给一个制表技术的例子：

function merta(n){
    if (!merta.cache) {
        merta.cache={
            0:0,
            1:1
        }
    };
    if (!merta.cache.hasOwnProperty(n)) {
        merta.cache[n]=n*merta(n-1);
    };
    return merta.cache[n];
}

求数字的阶乘，每次递归的结果都被缓冲，从而达到节省性能。

5.字符串的优化

str+="one"+"two";

在运行的时候会产生一个临时变量="onetwo",然后让这个临时变量+=str，而str=str+'one'+'two',就会阻止临时变量的产生，从而做到优化。在大多数浏览器会加快10%-40%

在ie中，这些优化并不适用，ie的字符串处理机制不用，在ie8中连接字符串只会记下各个字符串的引用，在连接的时候把各个字符串拷贝到真正的字符串中，并取代它的引用。
而ie8以前的实现更糟，这种方法反而会使效率更慢。ie8以前给每一个字符串的拷贝分配空间，在大量字符串连接的时候性能消耗成倍增长，只能用数组的连接方法来达到优化

while(len--){
    newstr[newstr.length]=str;
}
newStr=newstr.join('');