一、访问与修改DOM
DOM和JS 相当于两个岛屿，访问操作的次数越多，要交的过路费越多，对性能产生很大影响。
减少访问DOM的次数，把运算尽量留在JS端操作。
二、innerHTML 对比 DOM 方法
1、对于原生的DOM方法和innerHTML比较，性能相差无几。
2、对于大量操作，针对不同浏览器，性能不一样，因此取决于经常用的浏览器。
3、建议从可读性、稳定性、编码习惯来决定使用哪种方式。在对字符串经过优化后，innerHTML性能可以得到大幅提升。
三、操作上的优化
1、节点克隆
例如：
var tr = document.createElement("tr"); var otd = document.createElement("td"); for(var i = 1; i<=1000; i++) { tr.appendChild(otd.cloneNode(false)); }
2、HTML集合
document 中的方法getElementByName、getElementByTag、getElementByClassName 和属性images、links、forms返回的都是集合。
由于HTML集合一直与文档保持着联系，每次你需要更新最新信息时，都会重复执行查询的过程，哪怕只是获取集合里的元素。
在相同的情况下，遍历一个数组，明显快于一个HTML集合。
访问一个较小的集合，很多情况下缓存Length就够了。toArray()函数可做为一个通用的集合转数组函数，但转换时，需考虑转换后，会多遍历一次。
3、选择最高效的API
DOM API 提供了多种方法，使用时尽量选择最高效的API，例如，遍历查找childNodes 会比nextSibling 慢很多。
4、元素节点
children 比childNodes 快很多，childElementCount 比childNodes.length 快。
5、使用选择器时，尽量合并一次操作。
如：document.querySelectorAll("div.warning, div.notice")
6、不要再重绘布局改变时，查询它。如：
bodystyle.color='red'; tem=computed.backgroundColor; bodystyle.color='white'; tem=computed.backgroundImage; //高效写法 bodystyle.color='red'; bodystyle.color='white'; tem=computed.backgroundColor; tem=computed.backgroundImage;
7、改变样式
多次操作style 样式，不如直接修改其CSS样式，style.cssText，改变className更容易维护。
8、批量修改DOM
当需要批量修改DOM时，可以通过以下步骤来减少重绘或重排的次数：
a、使元素脱离文档
隐藏元素，应用修改，再重新显示。
在DOM之外创建一个子树，再将其拷回文档。
将原始元素拷贝到一个脱离文档的节点中，修改副本，再替换原始元素。
b、对其应用多重改变
c、把元素带回文档中
9、缓存布局信息
将频繁操作的元素信息，保存到变量里，再进行操作。
10、让元素脱离动画流
元素的大小、位置动画变化时，会带来大量的文档重绘。尽量使用元素的绝对定位来使其脱离文档流。
11、tr:hover 类似效果性能会降低很多。
12、事件委托
避免事件的多次绑定和冒泡，阻止默认动作。