js循环引用引起的内存泄漏示例

JavaScript010

js循环引用引起的内存泄漏示例,第1张

Js中存在和OC同等意义的闭包（block&closure）闭包可看作匿名函数，例如：

函数中 给element的onclick属性赋值了一个闭包，闭包要访问element的id属性。闭包在js中也是对象，函数即对象。闭包会持有外部传入的变量，因此闭包持有了element对象，而element对象通过onclick属性持有了闭包，因此两个对象相互持有，造成内存泄漏。

与OC类比，OC中使用weak对象引用，来解决循环引用的问题，js中也有类似操作，例如：

因为var id是由赋值得到的，js的赋值操作是值或者引用的拷贝，并不持有对象。此时element持有闭包，闭包持有id对象，并未造成循环引用。

内存无法回收，造成内存泄露。js定时器不会被自动销毁，即它所占内存无法被自动回收，如果不回收清除定时器，它会一直占用内存资源，造成内存泄漏。定时器是一个应用十分广泛的线程工具，可用于调度多个定时任务通过后台线程的方式执行。

做项目的时候遇到切换路由，vueComponent仍然存在内存中，不会被回收的问题。

还未找到解决方法，记录一下别人的解决方法：

我在项目中把存在全局对象的数据放到vuex中，destroyed的中销毁事件监听等，在win10的IE和Chrome内存平稳了，但是win7的IE还是存在问题……蒙圈了

win7的话，在created和mounted中声明的变量要手动置为null，长的表达式用变量存下来，用完清空，data中的东西在destroyed中设置为null，setTimeout在beforeDestroy中清除，很多东西要手动清，包括引入的第三方插件

最最重要的，如果数据庞大，不要用vue的双向绑定