在 JavaScript 程序的开发中，经常会用到一些频繁触发的 DOM 事件，如 mousemove、resize，还有不是那么常用的鼠标滚轮事件：mousewheel (在 Firefox 中，滚轮事件为 DOMMouseScroll)。

浏览器为了确保这些事件能够及时响应，触发的频率会比较高，具体的触发频率各浏览器虽然有出入，但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化，下面说说我的一些优化方法。

mousemove 在拖拽中的优化
拖拽( Drag )是很常见的一个功能，在浏览器还没实现原生的拖拽之前，通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来，当然这里不谈如何去实现一个拖拽功能。

mousemove 事件在拖拽的应用中既要确保拖拽的流畅度，又要确保拖拽时的性能，如何保持两者的平衡呢？

可以通过设置一个计数器来去掉一半的 mousemove 事件的触发，代码如下

上面只是增加了很少的几行代码，通过判断计数器是否为偶数，就可以去掉一半的 mousemove 事件执行的次数，同时拖拽功能的流畅度基本不受影响。

mousemove 模拟 mouseenter 效果
最近碰到这么一个需求，需要在图片上绑定一个事件，当鼠标移动到图片上时对图片进行放大，绝大多数人的第一反应就是直接使用 mouseenter 事件来处理。但是使用 mouseenter 事件会带来误触发，尽管可以使用定时器来配合也还是会有误触发，因为图片对于 mouseenter 的触发区域是比较大的，当鼠标划过一张 200*200 尺寸的图片时，此时给 mouseenter 设置一个 500 毫秒的延时，效果可能达不到预期。对交互方式做进一步的优化，当鼠标快速划过图片时不触发事件，只有鼠标短暂的停留在图片上时才触发事件。通过对 mousemove 添加一个定时器就可以实现该效果。代码如下：

鼠标频繁的移动触发的 mousemove 事件会清除掉上一次添加的定时器，只有当鼠标停留时间超过设置的 200 毫秒才会触发事件，当然在鼠标移开的时候一定要记得清除掉定时器。360图片搜索就采用了这种触发方式，这样就不会再有误触发了。

resize 事件的优化
resize 是在浏览器窗口大小改变的时候触发的事件，通常改变一次会触发 2、3 次 resize 事件，对于 IE6/7 resize 更容易被触发。resize 事件通常用于当窗口改变大小时，网页的布局也会根据窗口大小进行自适应布局。自适应布局如果对性能的消耗比较大，那么就要尤为注意 resize 触发的频率。同样使用定时器来实现。

通过反复的调试，发觉给 resize 添加一个 100 毫秒的延迟的效果会比较理想，既能保证事件的及时性，又能达到优化的目的。

mousewheel 事件的优化
mousewheel 是鼠标滚轮滚动时触发的事件，在 Firefox 中该事件名为 DOMMouseScroll，在一些场合下，比如通过鼠标滚轮来控制 lightbox 组件图片的前后切换，又或者通过鼠标滚轮来放大和缩小地图。鼠标滚轮通常都会比较灵活，可能一次会滚动好几次，但是在具体的应用中这种太灵活的滚动在前面提到过的场景中必然会有误触发。直接将上面封装好的 throttle 函数拿过来稍微改下时间间隔同样能达到优化效果。

鼠标滚轮设置 200 毫秒的延迟会有较理想的效果。

以上的一些优化方法大多是通过定时器来实现的，关键还是看如何灵活运用了。这些优化并不限于性能上的优化，还有交互效果上的优化，说到底就是以前端的角度出发，从细节入手来提升用户体验。

javascript性能优化注意些节。记录一下。

1. 批量增加 Dom

尽量使用修改 innerHTML 的方式而不是用 appendChild 的方式 ; 因为使用 innerHTML 开销更小 , 速度更快 , 同时也更加内存安全 .

有一点需要注意的是 , 用 innerHTML 方式添加时 , 一定不要在循环中使用 innerHTML += 的方式添加 , 这样反而会使速度减慢 ; 而是应该中间用 array 缓存起来 , 循环结束后调用 xx.innerHTML = array.join(‘’); 的方式 , 或者至少保存到 string 中再插到 innerHTML 中 .

针对用户列表一块采用这种方式优化后 , 加载速度提升一倍 .

2. 单个增加 Dom

这里是指要将新节点加载到一个内容不断变化的节点的情形 , 对于内容稳定的节点来说 , 随便怎么加都没有问题 . 但是对于有动态内容的节点来说 , 为其添加子节点尽量使用 dom append 的方式 .

这是因为 ,dom append 不会影响到其他的节点 ; 而如果修改 innerHTML 属性的话 , 该父节点的所有子节点都会从 dom 树中剥离 , 再根据新的 innerHTML 值来重绘子节点 dom 树 ; 所有注册到原来子节点的事件也会失效 .

综上 , 如果在一个有动态内容的节点上 出现了 innerHTML += 的代码 , 就该考虑是否有问题了 .

3. 创建 Dom 节点
用 createElement 方式创建一个 dom 节点 , 有一个很重要的细节 : 在执行完 createElement 代码之后 , 应该马上 append 到 dom 树中 ; 否则 , 如果在将这个孤立节点加载到 dom 树之前所做的赋值它的属性和 innerHTML 的操作都会引发该 dom 片段内存无法回收的问题 . 这个不起眼细节 , 一旦遇到大量 dom 增删操作 , 就会引发内存的灾难 .

4. 删除 Dom 节点
删除 dom 节点之前 , 一定要删除注册在该节点上的事件 , 不管是用 observe 方式还是用 attachEvent 方式注册的事件 , 否则将会产生无法回收的内存 .

另 , 在 removeChild 和 innerHTML=’’ 二者之间 , 尽量选择后者 . 因为在 sIEve( 内存泄露监测工具 ) 中监测的结果是用 removeChild 无法有效地释放 dom 节点 .

5. 创建事件监听
现有的 js 库都采用 observe 方式来创建事件监听 , 其实现上隔离了 dom 对象和事件处理函数之间的循环引用 , 所以应该尽量采用这种方式来创建事件监听 .

6. 监听动态元素
Dom 事件默认是向上冒泡的 , 发生在子节点中的事件 , 可以由父节点来处理 . Event 的 target/srcElement 仍是产生事件的最深层子节点 . 这样 , 对于内容动态增加并且子节点都需要相同的事件处理函数的情况 , 可以把事件注册上提到父节点上 , 这样就不需要为每个子节点注册事件监听了 .

同时 , 这样做也避免了产生无法回收的内存 . 即使是用 Prototype 的 observe 方式注册事件并在删除节点前调用 stopObserving, 也会产生出少量无法回收的内存 , 所以应该尽量少的为 dom 节点注册事件监听 .

所以 , 当代码中出现在循环里注册事件时 , 也是我们该考虑事件上提机制的时候了 .

7. HTML 提纯
HTML 提纯体现的是一种各负其责的思想 . HTML 只用来显示 , 尽量不出现和显示无关的属性 . 比如 onclick 事件 , 比如自定义的对象属性 .

事件可以用前面的方法避免 , 对象属性指的是这样的一种情景 : 通常情况下 , 动态增加的内容都是有个对象和它对应 , 比如聊天室的用户列表 , 每个显示用户的 dom 节点都有一个 user 对象和它对应 , 这样在 html 中 , 应该仅保留一个 id 属性和 user 对象对应 , 而其他的信息 , 则应通过 user 对象去获取 .