红宝书中关于js性能优化的总结

getElementsByTagName()方法返回的是包含零或多个元素的HTMLCollection对象，作为一个动态集合，该对象与NodeList非常相似。本质上来说，所有NodeList对象都是在访问DOM文档时实时运行的查询。所以应该尽量减少访问NodeList的次数，可以考虑将从NodeList中取得的值缓存起来：

//IE8及以前版本中无效
var array=Array.prototype.slice.call(nodeList,0);

或者仅保存其中某个要用到的属性：

for(var i=0,len=nodeList.length;i<len;i++){
  dosomething();
}

频繁地添加DOM元素会导致浏览器反复渲染新信息，可以使用createDocumentFragment创建一个文档片段保存要创建的元素，再一次把他们添加到文档中：

var fragment=document.createDocumentFragment();
fragment.appendChild(document.createTextNode('Item'));
document.body.appendChild(fragment);

在插入大量HTML标记时，使用innerHTML属性与通过多次DOM操作先创建节点再指定它们的关系相比，效率要高很多。因为在设置innerHTML或outerHTML时会创建一个HTML解析器，这个解析器时在浏览器级别的代码基础上运行的，比执行js要快得多。
但是不可避免创建HTML解析器也会带来性能损失，因此最好能够将设置innerHTML的次数控制在合理的范围内，至少不要在循环中设置innerHTML，可以先创建一个字符串，最后一次性将结果赋值给innerHTML：

var text='';
for(var i=0,len=array.length;i<len;i++){
  text+='color';
}
element.innerHTML=text;

4.事件委托
事件委托利用了事件冒泡，只指定一个事件处理程序就可以处理一个类型的所有事件。

list.addEventListener('click',function(event){
  switch (event.target.id){
  case 'item1':
  break;
  case 'item2':
  break;
}
},false)