JS、VUE内存溢出问题的解决方案

1、学会使用devTool

参考文章

 

Memory详解：

a、需要使用Memory来分析内存变化，至少记录两次内存快照，用于做内存变化比对。

 

举例：

编辑器有内存溢出，所以在打开前记录一次快照，打开编辑器等待加载完成，然后关闭编辑器，再记录一次快照。

两次快照间的内存差异，很大可能是内存溢出部分。当然，也有可能是一些依赖增长，此时多次打开关闭，观察内存变化，持续累积的部分必然是内存溢出。

 

b、关注detachDomElement

 

detach的元素表示这些DOM元素不在DOM树中，但是有被js对象所引用。

一般来说，这是内存溢出查找的主要入口。

 

查找的流程

1、找到shallow size较大的元素，一般来说会是HTMLDivElement，任意选中其中的一项，可以看到以下内容：

 

该清单表示它的被引用情况，此时，重点关注以下几项：

1、用户写的对象

2、监听

3、context上下文，上下文表示一些未被回收的函数中，有使用到相关对象

 

 

2、常见的解决方案

 

1 监听的问题

很多开发者在使用观察者模式后，忘了写对应的注销代码，这是大忌。不论是js、jquery、vue还是自己写的监听，都必须有对应的注销代码。

 

有on就得有off。

有addListener就得有removeListener。

 

举例：

在mounted的时候注册的监听，在beforeDestroy时候销毁。

 

2、VUE本身的问题

 

VUE挂载了大量的对象，有可能因为用户代码的介入，导致无法销毁，所以加入以下代码：

 

const cleanVnode=vnode=>{  if(vnode){  vnode.elm = null;  vnode._renderChildren=null;  vnode.children=null;  // vnode.context=null;  vnode.componentOptions=null;  } }  Vue.mixin({  beforeDestroy() {  if(this.$el)  delete this.$el.__vue__;  },  destroyed() {  //为了内存，清空所有内容  this.$children = [];  this.$parent = null;  this._watchers = [];  this.$refs = {};  this.$root = null;  this.$slots = [];  this.$store = null;  cleanVnode(this._vnode);  cleanVnode(this.$vnode)  this._vnode = null;  this.$vnode = null;  if(this.$el)  delete this.$el.__ro__;  this.$el = null;  // this.$el=null;  this._watcher = null;  this._computedWatchers = {};  //ab-aui的内存溢出问题  this.popperElm=null;  if(this.$options){  this.$options.parent=null;  this._parentVnode=null;  this.$options=null;  }  }, }) 

 

需要注意，该代码由于this.$el的销毁，可能会造成一些bug。

 

 

3、全局对象的问题

 

a、减少全局对象的时候，关闭对象的时候，也要其销毁在全局对象中的对应引用。

b、vue+全局对象可能有的观察者（监听）问题，vue会在对象中注册__ob__，ob指的是observe，所以需要销毁这些内容。推荐delete 全局对象.__ob__。

 

4、monacoEditor的问题

monacoEditor也有内存溢出问题，虽然它提供了dispose函数，但是我发现有时它销毁不了所有对象。

自行销毁方式如下：

//this.editor为MonacoEditor实例
 this.editor && this.editor.dispose();  let config = this.editor._contentWidgets[  "editor.widget.suggestWidget"  ];  let x;  if ((x = config && config.widget)) {  x.dispose();  x.elememt = null;  x.editor = null;  x.list.dispose();  x.details.editor=null;  x.details.dispose();  for (let k in x) {  delete x[k];  }  }  for (let k in this.editor) {  delete this.editor[k];  }   this.editor = null;  this.__resize_ob = null;

 

5、VUE的computed中使用Vue.set的问题

Vue.set会触发观察，computed中禁止使用。可以考虑使用防抖队列。