前段时间，测试的同事跟我说，前端有非常严重的内存泄漏问题。使用不到一天的时间，浏览器的内存占用就达到了六七百兆，用户操作无响应。比较明显的是，在某个页面中，使用了树形控件，里面有上千个节点。每次刷新树形控件，浏览器内存都会增长30M左右。

    经过一段时间的学习和实验，找到了一些方法，虽然不能完全解决内存增长的问题，但相比原来极大的减少了内存增长的速度。

    例如，在较低版本的IE浏览器中，内存增长30M，修改之后，内存只增长5M。而在IE9上，未修改之前的代码，内存增长10M，修改之后，内存只增长1M多。（以上数据基于同样的操作。）   

    可见，修改之后，内存的增长速度只有原来的1/6。这样对比的话，原来用一天下来占用六七百兆内存，修改之后就只占一两百兆了。

    下面，说一下在修改过程中用到的两个主要的方法。

    一：使用innerHTML=""来清除DOM节点

    代 码采用的是mootools框架，清除节点的时候，直接调用的是Element的destroy方法，而destroy方法内存除了清理mootools 框架内部的一下数据外，最终是通过parentNode.removeNode来移除节点的。但是，通过使用sIEVE，发现节点没有被回收。后来，通过 上网查找资料，发现在IE下需要使用一个临时节点，将要清除的节点append到该临时节点上，然后设置该临时节点的innerHTML等于空。

    二：清除Widget所有属性

    在 前端组件的开发中，我们使用了domNode属性来引用该组件的DOM节点的根节点。在前端组件的销毁过程中，我们一般都设置了domNode等于 null，但是大部分的组件都不止引用了domNode，为了方便操作，还引用了组件内很多其他节点。这样一来，就需要我们在组件的销毁过程中逐个接触对 DOM节点的引用。但随着组件的修改，难免会忘记在组件销毁时清空。所以，写了个通用的清除方法，直接清空组件的所有属性。

    通过以上两个方法，达到了大幅降低的内存占用的增长速度的目的。