欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用中的內(nèi)存泄漏【推薦】

 更新時(shí)間:2018年07月10日 15:56:42   作者:李銀城  
內(nèi)存泄露是指new了一塊內(nèi)存,但無法被釋放或者被垃圾回收。這篇文章主要介紹了vue使用中的內(nèi)存泄漏,需要的朋友可以參考下

今天看到一篇關(guān)于js使用中內(nèi)存泄露的文章,以及chrom瀏覽器查看內(nèi)存泄漏的方法,決定留著。本文只截取了我認(rèn)為比較重要的部分,喜歡原文的小伙伴,請(qǐng)點(diǎn)擊文章下方的原文鏈接。

什么是內(nèi)存泄露??jī)?nèi)存泄露是指new了一塊內(nèi)存,但無法被釋放或者被垃圾回收。new了一個(gè)對(duì)象之后,它申請(qǐng)占用了一塊堆內(nèi)存,當(dāng)把這個(gè)對(duì)象指針置為null時(shí)或者離開作用域?qū)е卤讳N毀,那么這塊內(nèi)存沒有人引用它了在JS里面就會(huì)被自動(dòng)垃圾回收。但是如果這個(gè)對(duì)象指針沒有被置為null,且代碼里面沒辦法再獲取到這個(gè)對(duì)象指針了,就會(huì)導(dǎo)致無法釋放掉它指向的內(nèi)存,也就是說發(fā)生了內(nèi)存泄露。為什么代碼里面會(huì)拿不到這個(gè)對(duì)象指針了呢,舉一個(gè)例子:

// module date.js
let date = null;
export default {
 init () {
  date = new Date();
 }
}
// main.js
import date from 'date.js';
date.init();

在main.js初始化了date之后,date這個(gè)變量就一會(huì)直存在了,直到你把頁面關(guān)了,因?yàn)閐ate的引用是在另一個(gè)module里面,可以理解為模塊就是一個(gè)閉包對(duì)外是不可見的。所以如果你是希望這個(gè)date對(duì)象一直存在、需要一直使用的話,那么沒有問題,但是如果想用一次就不用了那就會(huì)有問題,這個(gè)對(duì)象一直在內(nèi)存里面沒有被釋放就發(fā)生了內(nèi)存泄露。

另一種比較隱蔽并且很常見的內(nèi)存泄露是事件綁定,形成了一個(gè)閉包,導(dǎo)致一些變量一直存在。如下例子所示:

// 一個(gè)圖片懶惰加載引擎示例
class ImageLazyLoader {
 constructor ($photoList) {
  $(window).on('scroll', () => {
   this.showImage($photoList);
  });
 }
 showImage ($photoList) {
  $photoList.each(img => {
   // 通過位置判斷圖片滑出來了就加載
   img.src = $(img).attr('data-src');
  });
 }
}
// 點(diǎn)擊分頁的時(shí)候就初始化一個(gè)圖片懶惰加載的
$('.page').on('click', function () {
 new ImageLazyLoader($('img.photo'));
});

這是一個(gè)圖片懶惰加載的模型,每次點(diǎn)分頁的時(shí)候就會(huì)清掉上一頁的數(shù)據(jù)更新為當(dāng)前頁的DOM,并重新初始化一個(gè)懶惰加載的引擎。它里面監(jiān)聽了scroll事件,對(duì)傳進(jìn)來的圖片列表的DOM進(jìn)行處理。每點(diǎn)一次分頁就會(huì)重新new一個(gè),這里就發(fā)生了內(nèi)存泄露,主要是以下3行代碼導(dǎo)致的:

$(window).on('scroll', () => {
 this.showImage($photoList);
});

因?yàn)檫@里的事件綁定形成了一個(gè)閉包,this/$photoList這兩個(gè)變量一直沒有被釋放,this是指向ImageLazyLoader的實(shí)例,而$photoList是指向DOM結(jié)點(diǎn),當(dāng)清除掉上一頁的數(shù)據(jù)的時(shí)候,相關(guān)DOM結(jié)點(diǎn)已經(jīng)從DOM樹分離出來了,但是仍然還有一個(gè)$photoList指向它們,導(dǎo)致這些DOM結(jié)點(diǎn)無法被垃圾回收一直在內(nèi)存里面,就發(fā)生了內(nèi)存泄露。由于this變量也被閉包困住了沒有被釋放,所以還有一個(gè)ImageLazyLoader的實(shí)例發(fā)生內(nèi)存泄露。

這個(gè)的解決方法比較簡(jiǎn)單,就是銷毀實(shí)例的時(shí)候把綁定的事件off掉,如下代碼所示:

class ImageLazyLoader {
 constructor ($photoList) {
  this.scrollShow = () => {
   this.showImage($photoList);
  };
  $(window).on('scroll', this.scrollShow);
 }
 // 新增一個(gè)事件解綁       
 clear () {      
  $(window).off('scroll', this.scrollShow);
 }
 showImage ($photoList) {
  $photoList.each(img => {
   // 通過位置判斷圖片滑出來了就加載
   img.src = $(img).attr('data-src');
  });
  // 判斷如果圖片已全部顯示,就把事件解綁了
  if (this.allShown) {
   this.clear();
  }
 }
}
// 點(diǎn)擊分頁的時(shí)候就初始化一個(gè)圖片懶惰加載的
let lazyLoader = null;
$('.page').on('click', function () {
 lazyLoader && (lazyLoader.clear());
 lazyLoader = new ImageLazyLoader($('img.photo'));
});

在每次實(shí)例化一個(gè)ImageLazyLoader之前把先把上一個(gè)實(shí)例clear掉,clear里面進(jìn)行解綁,由于JS有構(gòu)造函數(shù)但是沒有解構(gòu)函數(shù),所以需要自己寫一個(gè)clear,在外面手動(dòng)調(diào)一下clear。同時(shí)在事件的執(zhí)行過程的合適時(shí)機(jī)自動(dòng)把事件給解綁了,上面是判斷如果所有的圖片都展示出來了那么就沒必要監(jiān)聽scroll事件了直接解綁了。這樣就能解決內(nèi)存泄露的問題了,能夠觸發(fā)自動(dòng)垃圾回收。

為什么把事件解綁了,就不會(huì)有閉包引用了呢?因?yàn)镴S引擎檢測(cè)到那個(gè)閉包沒用了,就把那個(gè)閉包銷毀了,那么閉包引用的外部變量也自然會(huì)被置空。

好了,基礎(chǔ)知識(shí)就講解到這里,現(xiàn)在用Chrome devtools的內(nèi)存檢測(cè)工具來實(shí)際操作一遍,方便發(fā)現(xiàn)頁面的一些內(nèi)存泄露行為。為了避免裝給瀏覽器裝的一些插件造成影響,使用Chome的隱身模式頁面,它會(huì)把所有的插件都給禁掉。

然后打開devtools,切到Memory的tab,選中Heap snapshot,如下所示:

 

什么叫heap snapshot呢?翻譯一下就是堆快照,給當(dāng)前內(nèi)存堆拍一張照片。因?yàn)閯?dòng)態(tài)申請(qǐng)的內(nèi)存都是在堆里面的,而局部變量是在內(nèi)存棧里面,是由操作系統(tǒng)分配管理的是不會(huì)內(nèi)存泄露了。所以關(guān)心堆的情況就好了。

然后做一些增刪改DOM的操作,如:

(1)彈一個(gè)框,然后把彈框給關(guān)了

(2)單頁面的點(diǎn)擊跳轉(zhuǎn)到另一個(gè)路由,然后再點(diǎn)后退返回

(3)點(diǎn)擊分頁觸發(fā)動(dòng)態(tài)改DOM

就是先增加DOM,然后把這些DOM給刪了,看一下這些被刪除的DOM是否還有對(duì)象引用它們。

這里我是第2種方式的場(chǎng)景,檢測(cè)單頁面應(yīng)用的某個(gè)路由頁面是否存在內(nèi)存泄露。先打開首頁,點(diǎn)到另一個(gè)頁面,再點(diǎn)后退,接著點(diǎn)一下垃圾回收的按鈕:

 

觸發(fā)垃圾回收,避免一些不必要的干擾。

然后再點(diǎn)一下拍照按鈕:

 

它就會(huì)把當(dāng)前頁面的內(nèi)存堆掃描一遍顯示出來,如下圖所示:

 

然后在上面中間的Class Filter的搜索框里搜一下detached:

 

它就會(huì)顯示所有已經(jīng)分離了DOM樹的DOM結(jié)點(diǎn),重點(diǎn)關(guān)注distance值不為空的,這個(gè)distance表示距離DOM根結(jié)點(diǎn)的距離。上圖展示的這些div具體是啥呢?我們把鼠標(biāo)放上去不動(dòng)等個(gè)2s,它就會(huì)顯示這個(gè)div的DOM信息:

 

通過className等信息可以知道它就是那個(gè)要檢查的頁面的DOM節(jié)點(diǎn),在下面的Object的窗口里面依次展開它的父結(jié)點(diǎn),可以看到它最外面的父結(jié)點(diǎn)是一個(gè)VueComponent實(shí)例:

 

下面黃色字體native_bind表示有個(gè)事件指向了它,黃色表示引用仍然生效,把鼠標(biāo)放到native_bind上面停留2秒:

它會(huì)提示你是在homework-web.vue這個(gè)文件有一個(gè)getScale函數(shù)綁定在了window上面,查看一下這個(gè)文件確實(shí)是有一個(gè)綁定:

mounted () {
 window.addEventListener('resize', this.getScale);
}

所以雖然Vue組件把DOM刪除了,但是還有個(gè)引用存在,導(dǎo)致組件實(shí)例沒有被釋放,組件里面又有一個(gè)$el指向DOM,所以DOM也沒有被釋放。

要在beforeDestroyed里面解綁的

beforeDestroyed () {
 window.removeEventListener('resize', this.getScale);
}

所以綜合上面的分析,造成內(nèi)存泄露的可能會(huì)有以下幾種情況:

(1)監(jiān)聽在window/body等事件沒有解綁

(2)綁在EventBus的事件沒有解綁

(3)Vuex的$store watch了之后沒有unwatch

(4)模塊形成的閉包內(nèi)部變量使用完后沒有置成null

(5)使用第三方庫創(chuàng)建,沒有調(diào)用正確的銷毀函數(shù)

并且可以借助Chrome的內(nèi)存分析工具進(jìn)行快速排查,本文主要是用到了內(nèi)存堆快照的基本功能,讀者可以嘗試分析自己的頁面是否存在內(nèi)存泄漏,方法是做一些操作如彈個(gè)框然后關(guān)了,拍一張堆快照,搜索detached,按distance排序,把非空的節(jié)點(diǎn)展開父級(jí),找到標(biāo)黃的字樣說明,那些就是存在沒有釋放的引用。也就是說這個(gè)方法主要是分析仍然存在引用的游離DOM節(jié)點(diǎn)。因?yàn)轫撁娴膬?nèi)存泄露通常是和DOM相關(guān)的,普通的JS變量由于有垃圾回收所以一般不會(huì)有問題,除非使用閉包把變量困住了用完了又沒有置空。

DOM相關(guān)的內(nèi)存泄露通常也是因?yàn)殚]包和事件綁定引起的。綁了(全局)事件之后,在不需要的時(shí)候需要把它解綁。當(dāng)然直接綁在div上面的可以直接把div刪了,綁在它上面的事件就自然解綁了。

相關(guān)文章

  • vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能

    vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能

    這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能,本文通過實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-03
  • Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例

    Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例

    這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 詳解vue 圖片上傳功能

    詳解vue 圖片上傳功能

    這篇文章主要介紹了vue 圖片上傳功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue項(xiàng)目中如何封裝axios(統(tǒng)一管理http請(qǐng)求)

    Vue項(xiàng)目中如何封裝axios(統(tǒng)一管理http請(qǐng)求)

    這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios(統(tǒng)一管理http請(qǐng)求)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • vue?axios接口請(qǐng)求封裝方式

    vue?axios接口請(qǐng)求封裝方式

    這篇文章主要介紹了vue?axios接口請(qǐng)求封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue3中如何使用vue-types

    vue3中如何使用vue-types

    vue-types 在 Vue 3 中的使用主要適用于希望進(jìn)行更細(xì)致的 prop 驗(yàn)證的場(chǎng)景,尤其是在 JavaScript 項(xiàng)目中,這篇文章給大家介紹vue3中如何使用vue-types,感興趣的朋友跟隨小編一起看看吧
    2024-04-04
  • vue打包添加gzip配置項(xiàng)方式

    vue打包添加gzip配置項(xiàng)方式

    這篇文章主要介紹了vue打包添加gzip配置項(xiàng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟

    Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟

    這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • Vue中如何定義數(shù)據(jù)示例詳解

    Vue中如何定義數(shù)據(jù)示例詳解

    這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-09-09
  • el-upload?文件上傳組件的使用講解

    el-upload?文件上傳組件的使用講解

    Upload?上傳文件這個(gè)功能是我們?cè)谄髽I(yè)實(shí)際開發(fā)當(dāng)中使用頻率是非常高的這樣一個(gè)文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧
    2024-02-02

最新評(píng)論