這篇文章主要介紹vue中單頁應用內(nèi)存泄露的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)服務項目包括玉田網(wǎng)站建設、玉田網(wǎng)站制作、玉田網(wǎng)頁制作以及玉田網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，玉田網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到玉田省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、什么是內(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應用邏輯，直到垃圾回收結(jié)束再重新執(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)存泄露

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

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

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

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

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

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

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

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

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

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

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

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

以上是“vue中單頁應用內(nèi)存泄露的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站欄目：vue中單頁應用內(nèi)存泄露的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/dcigji.html