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

vue單頁應用的內(nèi)存泄露定位和修復問題小結

 更新時間:2019年08月02日 09:37:43   作者:廣州鵬少  
系統(tǒng)進程不再用到的內(nèi)存,沒有及時釋放,就叫做內(nèi)存泄漏(memory leak)。這篇文章主要介紹了vue單頁應用的內(nèi)存泄露定位和修復,需要的朋友可以參考下

在前端項目(PC端)中,內(nèi)存泄露的定位往往比修復更加困難,即使google瀏覽器有提供Memory工具,但是面對成千上萬的元素和錯綜復雜的引用關系,開發(fā)則依然很難快速定位到問題代碼塊。

一、什么是內(nèi)存泄漏?

系統(tǒng)進程不再用到的內(nèi)存,沒有及時釋放,就叫做內(nèi)存泄漏(memory leak)。當內(nèi)存占用越來越高,輕則影響系統(tǒng)性能,重則導致進程崩潰。Chrome限制了瀏覽器所能使用的內(nèi)存極限(64位為1.4GB,32位為1.0GB),這也就意味著瀏覽器將無法直接操作一些大內(nèi)存對象。

V8引擎在執(zhí)行垃圾回收時會阻塞 JavaScript應用邏輯,直到垃圾回收結束再重新執(zhí)行JavaScript應用邏輯,這種行為被稱為“全停頓”(stop-the-world)。 若V8的堆內(nèi)存為1.5GB,V8做一次小的垃圾回收需要50ms以上,造成假死現(xiàn)象。

二、JS內(nèi)存管理和垃圾回收機制GC

高級語言基本都有垃圾回收機制(garbage collection)自動管理內(nèi)存,降低程序員的負擔,以達到解決內(nèi)存泄漏的目的,但是不允許人為手動觸發(fā),無法對內(nèi)存管理進行任何干預。

老版本的瀏覽器使用引用計數(shù)法(Reference Counting)來管理內(nèi)存,即每次引用加一,被釋放時減一,當這個值的引用次數(shù)變成 0 時,就可以將其內(nèi)存空間回收,缺點是循環(huán)引用時無法回收。

現(xiàn)代瀏覽器基本采用標記清除法(Mark-and-Sweep)來管理內(nèi)存,即瀏覽器周期性地從某個根元素(譬如 window 對象)開始找引用變量,及這些變量引用的變量,這樣一直找下去。能找到的變量為可獲得變量,不能找到的將被內(nèi)存回收。


缺點是清除后內(nèi)存會產(chǎn)生很多細化的分塊,所以又衍生了標記-整理法,不細講。

三、VUE中容易出現(xiàn)內(nèi)存泄露的幾種情況

內(nèi)存泄露是一個累積的過程,只有頁面生命周期略長的時候才暴露出問題,頻繁交互能夠加快累積的過程,偏展示的頁面很難把這樣的問題暴露出來(所謂刷新一下又能滿血復活)。所以很多時候我們都是被動式的等待問題暴露然后進行排查的,主動式的分析通常比較難。vue頁面大多是單頁應用,高交互且停留時間久,處理不好很容易出現(xiàn)內(nèi)存泄漏。本文章 主要針對游離的dom對象進行排查 ,普通的JS變量排查有時間再補充。

1.全局變量造成的內(nèi)存泄露

<template>
 <div id="home">
  這里是首頁
 </div>
</template>

<script>
export default {
 mounted () {
  window.test = { // 此處在全局window對象中引用了本頁面的dom對象
   name: 'home',
   node: document.getElementById('home')
  }
 }
}
</script>

按下Heap snapshots鍵,搜索Detached,發(fā)現(xiàn)沒有脫離文檔樹的dom元素,屬于正常現(xiàn)象

改變路由跳轉到other頁面,按下Heap snapshots鍵,搜索Detached,發(fā)現(xiàn)有兩處dom元素游離于當前頁面之外,很明顯是window對象引用了home頁面中的div,即使此時home頁面已經(jīng)銷毀,home中的dom元素卻還駐留在內(nèi)存中無法釋放。

解決方案就是在頁面卸載的時候順便處理掉該引用。

<template>
 <div id="home">
  這里是首頁
 </div>
</template>

<script>
export default {
 mounted () {
  window.test = { // 此處在全局window對象中引用了本頁面的dom對象
   name: 'home',
   node: document.getElementById('home')
  }
 },
 destroyed () {
  window.test = null // 頁面卸載的時候解除引用
 }
}
</script>

2.除了直接引用,window的原生方法也會起到引用dom元素使其無法釋放的效果。

<template>
 <div id="home">這里是首頁</div>
</template>

<script>
export default {
 mounted () {
  window.addEventListener('resize', this.func) // window對象引用了home頁面的方法
 },
 methods: {
  func () {
   console.log('這是home頁面的函數(shù)')
  }
 }
}
</script>

 解決方法一樣,也是在頁面銷毀的時候,順便解除引用,釋放內(nèi)存

mounted () {
  window.addEventListener('resize', this.func)
},
beforeDestroy () {
  window.removeEventListener('resize', this.func)
}

3.一些全局的方法使用不當也會造成內(nèi)存無法釋放,在頁面卸載的時候也可以考慮解除引用

<template>
 <div id="home">這里是首頁</div>
</template>

<script>
export default {
 mounted () {
  this.$EventBus.$on('homeTask', res => this.func(res))
 },
 methods: {
  func (res) {
   console.log(res)
  }
 }
}
</script>

mounted () {
 this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
 this.$EventBus.$off()
}

造成游離dom節(jié)點的原因還有很多,不止這三種,總結起來:

1.window對象、事件總線、全局vuex上綁定了已銷毀頁面上的節(jié)點,到時節(jié)點不隨頁面一起銷毀

2.使用第三方庫創(chuàng)建實例,第三方庫一般會提供銷毀函數(shù),頁面跳轉時沒有調(diào)用正確的銷毀函數(shù)

3.有同學會說在頁面中使用閉包也會造成內(nèi)存泄露,在vue框架里有管理內(nèi)存的機制,只要按照它的正確編寫方法,理論上是不會造成內(nèi)存泄露的

總結

以上所述是小編給大家介紹的vue單頁應用的內(nèi)存泄露定位和修復問題小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • 分享12個Vue開發(fā)中的性能優(yōu)化小技巧(實用!)

    分享12個Vue開發(fā)中的性能優(yōu)化小技巧(實用!)

    一般來說,你不需要太關心vue的運行時性能,它在運行時非???但付出的代價是初始化時相對較慢,下面這篇文章主要給大家分享介紹了十二個Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下
    2022-02-02
  • Vue時間軸 vue-light-timeline的用法說明

    Vue時間軸 vue-light-timeline的用法說明

    這篇文章主要介紹了Vue時間軸 vue-light-timeline的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue路由 重定向和別名的區(qū)別說明

    Vue路由 重定向和別名的區(qū)別說明

    這篇文章主要介紹了Vue路由 重定向和別名的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue3+TypeScript實現(xiàn)Docx/Excel預覽組件

    Vue3+TypeScript實現(xiàn)Docx/Excel預覽組件

    這篇文章主要為大家詳細介紹了如何使用Vue3+TypeScript實現(xiàn)Docx/Excel預覽組件,文中的示例代碼講解詳細,有需要的小伙伴可以參考下
    2024-04-04
  • Vue.js學習之計算屬性

    Vue.js學習之計算屬性

    Vue.js 的內(nèi)聯(lián)表達式非常方便,但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復雜的邏輯,你應該使用計算屬性。下面這篇文章主要給大家介紹了Vue.js中的計算屬性,需要的朋友可以參考借鑒,一起來看看吧。
    2017-01-01
  • vue中關于checkbox使用的問題

    vue中關于checkbox使用的問題

    這篇文章主要介紹了vue中關于checkbox使用的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue常見路由跳轉的幾種方式小結

    vue常見路由跳轉的幾種方式小結

    本文主要介紹了常見路由跳轉的幾種方式,主要介紹了四種常見方式,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • 基于Vue2的移動端開發(fā)環(huán)境搭建詳解

    基于Vue2的移動端開發(fā)環(huán)境搭建詳解

    這篇文章主要給大家介紹的是基于Vue2的移動端環(huán)境搭建,移動端大家更多想到的是響應布局,我們根據(jù)不同大小的屏幕進行適配,當然少不了我們的重頭戲rem,移動端相比pc端就沒什么特別的了。我會一步一步帶領大家進入Vue2的世界,感興趣的朋友下面來一起學習學習吧。
    2016-11-11
  • vue結合el-dialog封裝自己的confirm二次確認彈窗方式

    vue結合el-dialog封裝自己的confirm二次確認彈窗方式

    這篇文章主要介紹了vue結合el-dialog封裝自己的confirm二次確認彈窗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-08-08
  • vue的指令和插值總結(非常詳細)

    vue的指令和插值總結(非常詳細)

    這篇文章主要給大家介紹了關于vue指令和插值的相關資料,大家應該對指令和插值都不陌生,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-06-06

最新評論