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中禁止使用。可以考慮使用防抖隊列。

posted @ 2020-06-19 16:09 荒土閱讀(5677) 評論(1) 收藏舉報

刷新頁面返回頂部

二三事

別死在孤獨里。起來，去明天。