提高dom元素操作效率的方法

1、批量读写
减少更新render tree的次数，可以先统一读取属性，然后统一修改DOM

var h1 = element1 . clientHeight ;
element1 . style . height = ( h1 * 2 ) + 'px' ;
var h2 = element2 . clientHeight ;
element2 . style . height = ( h2 * 2 ) + 'px' ;

===>

// 读取属性
var h1 = element1 . clientHeight ;
var h2 = element2 . clientHeight ;
// 将DOM修改操作放入队列
element1 . style . height = ( h1 * 2 ) + 'px' ;
element2 . style . height = ( h2 * 2 ) + 'px' ;

2、虚拟结点
当我们需要对DOM做出大量修改时，可以先创建一个虚拟结点，将所有修改附加在该节点，最后将该虚拟节点一次性提交给在render tree上存在的结点，则相当于只提交了一次修改操作。

// 创建一个虚拟节点
var fragment = document . createDocumentFragment ( ) ;   
for ( var i = 0 ; i < items . length ; i ++ ) {
//生成多个li标签，并将标签附加在虚拟结点上 
   var item = document . createElement ( "li" ) ;
   item . appendChild ( document . createTextNode ( "Option " + i ) ;
   fragment . appendChild ( item ) ;
}
// 将对该虚拟结点一次性提交给页面结构
list . appendChild ( fragment )

3、注意重排和重绘
4、使用事件委托，减少绑定事件的数量
5、多使用querySelector以及querySelectorAll（ 得到的是一个NodeList，它是一个类数组对象，不会带来HTML集合的问题 ），而不是document.getElementsByName、document.getElementsByTagName、document.getElementsByClassName、docuemnt.images（获取到的是HTML集合，效率低下）等