javascript性能优化之Dom编程性能调优总结

1、最小化的Dom访问，在一次Dom访问做尽可能多的操作；

2、使用局部变量存放指向反复访问的元素节点的Dom引用，原则上js代码中不应该重复获取同一个元素节点，除非它在运行过程中发生改变；

3、对元素集合（Html集合）小心处理，因为每次查询都会对底层的文档进行重新查询，在迭代处理中更好的的处理方式是缓存集合的length属性到一个局部变量中，当需要在迭代中使用元素集合，可以将该集合拷贝到数组中；

4、如果使用场景允许使用速度更快的API；

5、注意重绘和重排版，尽量降低重排版的次数，如果js代码中设计对大量的元素节点的几何操作建议创建一个文档片段（frame），对文档片段进行操作然后附加到原始的操作节点（最优解重排次数为1），批量修改风格，离线操作DOM树缓存并减少对布局信息的访问；

 

6、在js动画代码中为了避免动画节点集合属性改变引起整个页面的重新排版和渲染，建议对动画代码使用绝对坐标、拖放代理；

 

7、因为为元素绑定事件处理函数是一件极为消耗性能的事，而通常所有绑定事件处理函数的元素节点只有少部分触发，因此使用事件托管技术仅为触发最小化事件句柄是推荐的处理方式；

 

8、合理使用事件委托技术，利用事件冒泡，为层级尽可能高的元素添加事件处理程序，就可以管理子元素下同一类型的所有事件，而不必给每一个元素都绑定事件处理程序，占用的内存和访问dom节点的次数更少，可以大大提升性能。

转载于:https://www.cnblogs.com/wdai-zm-zyq/p/8274693.html