《高性能JavaScript》学习笔记——日更中

------------------7-20更------------------

最近在看《高性能JavaScript》一书，里面当中，有讲很多提高js性能的书，正在看的过程中，记下做法以及原因，供以后学习参考：

1、将经常使用的对象成员、数组项、和域外变量存入局部变量

原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中，全局变量位于作用域链的最后一环。变量在作用域链的位置越深，访问的时间就越长。

1 var doc = document; 2 var db = doc.body; 3 var odiv = doc.getElementById('div1');

2、避免使用with表达式，因为他改变了运行期上下文的作用域链。

3、同理with，也要注意使用try-catch，因为catch也会改变运行期上下文的作用域链。

4、嵌套成员变量会造成重大的性能影响，尽量少用。

5、DOM操作量化问题：

 1     //在循坏中更新页面，问题所在：每次循环都对DOM元素访问了两次，一次是读取document.getElementById('here').innerHTML的内容，一次是修改它。
 2     function changeDOM{
 3         for(var i=0; i < 15000; i++){
 4 document.getElementById('here').innerHTML += 'a';
 5         }
 6 
 7     }    
 8     //改变方法，使用局部变量存好改变量，在循环结束时一并修改
 9     function changeDOM{
10         var content =''；
11         for(var i=0; i < 15000; i++){
12 content += 'a';
13         }
14         document.getElementById('here').innerHTML += content;
15 
16     }

6、克隆已有的DOM元素，即element.cloneNode,比起新建节点来说，即element.createElement，会快一点，但是性能提高不是很大。

7、遍历数组明显快于同样大小和内容的HTML集合

8、 for循环时，HTML某元素集合的长度不建议直接作为循环终止条件，最好将集合的长度赋给一个变量，然后使用变量作为循环终止条件；

原因：当每次迭代过程访问集合的length时，它导致集合器更新，在所有的浏览器上都会产生明显的性能损失。

9、需要考虑实际情况的优化，根据7，可以将集合中的元素通过for循坏赋值到数组中，访问数组的数组快于集合。但是要注意对于复制的开销是否值得。

1     function toArray(collection){
2         var arr = ;
3         var clen = collection.length;
4         for(var i= 0; i < clen; i++){
5 arr[i] = collection[i];
6         }
7 
8     }

10、获取DOM节点，使用nextSibling方式与childNodes方式，在不同的浏览器中，这两种方法的时间基本相等。但是在IE中，nextSibling比childNodes好，IE6下，nextSibling比对手快16倍，在IE7下，快105倍。因此，在老的IE中性能严苛的使用条件下，用nextSibling较好。

11、querySelectorAll可以联合查询，即querySelectorAll(‘div .warning，div .notice’),在各大浏览器中支持也挺好的，还可以过滤很多非元素节点；

ps：这个网站是：http://caniuse.com/，可以检查HTML、CSS元素在各大浏览器的兼容情况，一个很有用的网站！

12、重绘和重排版；

重绘：不需要改变元素的长度和宽度，不影响DOM的几何属性；

重排版：影响了几何属性，需要重新计算元素的几何属性，而且其他元素的几何属性有可能也会受影响。浏览器会在重排版过程中，重新绘制屏幕上受影响的部分。