現(xiàn)代的web應(yīng)用程序消耗了大量的計(jì)算機(jī)資源。我在其中鍵入本文的博客應(yīng)用程序目前占用130兆內(nèi)存。以今天的規(guī)模來看，這是一個(gè)相當(dāng)不錯(cuò)的結(jié)果。在我配備8g內(nèi)存的筆記本電腦上，當(dāng)瀏覽器的內(nèi)存超過1g左右時(shí)，我就開始注意到性能問題。當(dāng)您構(gòu)建一個(gè)復(fù)雜的Vue應(yīng)用程序時(shí)，該應(yīng)用程序由許多視圖組成，這些視圖具有深度嵌套的組件層次結(jié)構(gòu)，很快您就會(huì)遇到內(nèi)存問題。這里是一個(gè)快速概述，你可以做什么與Chrome devtools的實(shí)用程序分析和改善應(yīng)用程序的內(nèi)存消耗。

在SQL Studio開發(fā)的早期階段，我注意到在一些視圖之間進(jìn)行密集切換后，性能有了細(xì)微的下降。這里要做的第一件事是檢查應(yīng)用程序的內(nèi)存使用情況。在Chrome中，標(biāo)簽內(nèi)存使用可以發(fā)現(xiàn)在內(nèi)置的任務(wù)管理器:按Shift+Esc或到Chrome主菜單，選擇更多工具>任務(wù)管理器。右鍵單擊頭部并選擇JavaScript Memory。注意列中的數(shù)字，然后對(duì)應(yīng)用程序進(jìn)行試驗(yàn)，檢查內(nèi)存消耗是否增加。在我的例子中，重復(fù)了一些步驟后，我得出的結(jié)論是內(nèi)存使用量增加了50% !

關(guān)于如何修復(fù)內(nèi)存問題，Chrome開發(fā)工具團(tuán)隊(duì)有一個(gè)很好的指導(dǎo)?？偠灾?，web應(yīng)用程序中內(nèi)存泄漏的一個(gè)常見來源是垃圾收集器無法處理的分離DOM元素。有一個(gè)專門的工具可以幫助調(diào)查內(nèi)存泄漏，那就是devtools的內(nèi)存配置文件。

堆快照概述了駐留在內(nèi)存中的JavaScript對(duì)象以及它們之間的關(guān)系。持有引用的對(duì)象稱為“retain”。

@字符后的數(shù)字是對(duì)象的唯一ID，允許您在每個(gè)對(duì)象的基礎(chǔ)上比較堆快照。每個(gè)構(gòu)造函數(shù)組意味著什么?

如果我們通過分離值來篩選類，我們將得到從DOM樹分離的所有元素的列表，以及直接間接引用這些元素(retain)的對(duì)象。在官方文檔中有很好的描述距離、淺層和保留大小等術(shù)語。

您可以選擇一個(gè)項(xiàng)目，然后在控制臺(tái)中輸入$0來打印該元素($0..$4參考元素檢查器或堆配置文件中選擇的最新項(xiàng)目，檢查控制臺(tái)實(shí)用程序API參考)。

您還可以檢查retain樹，并嘗試找到哪些對(duì)象防止分離的元素被垃圾收集。這并不總是內(nèi)存泄漏，元素也會(huì)因?yàn)閮?yōu)化的原因而保留。

有時(shí)，分離的元素是chrome擴(kuò)展的副作用。為了清晰起見，最好在內(nèi)存泄漏調(diào)查期間禁用擴(kuò)展(如果你不想使用單獨(dú)的瀏覽器或不想花時(shí)間手動(dòng)禁用擴(kuò)展，隱身模式會(huì)很有幫助)。

另外，要注意webpack的開發(fā)模式，像熱模塊重新加載這樣的特性可能會(huì)干擾應(yīng)用程序的正常執(zhí)行，增加堆分配，并可能產(chǎn)生泄漏。最好在運(yùn)行應(yīng)用程序的產(chǎn)品構(gòu)建時(shí)尋找漏洞。

保留大量內(nèi)存的可疑對(duì)象，可以提供泄漏發(fā)生位置的線索。

除非你非常熟悉devtools的堆快照內(nèi)部機(jī)制、V8、Blink渲染引擎和整個(gè)chromium，否則很難找到真正的保留路徑。

我在研究Vue應(yīng)用程序性能時(shí)開發(fā)的一種常用方法可以簡化為三個(gè)步驟:識(shí)別、證明和修復(fù)。

首先，找出在哪些情況下內(nèi)存消耗會(huì)增長。如果你使用路由器或動(dòng)態(tài)組件，這是第一個(gè)檢查的地方。如果你懷疑一個(gè)特定的組件，隔離組件和實(shí)驗(yàn)。嘗試禁用子組件或一些功能。內(nèi)存泄漏的一個(gè)常見來源是不正確的析構(gòu)和未處理的上下文。如果你在組件初始化鉤子中調(diào)用第三方組件構(gòu)造函數(shù)，請檢查你是否正確地注銷了beforeDestroy鉤子中的所有東西。

另一個(gè)內(nèi)存浪費(fèi)的潛在來源是Vuex狀態(tài)。包含復(fù)雜結(jié)構(gòu)(如多維數(shù)組)的狀態(tài)是大量內(nèi)存消耗的常見原因，特別是當(dāng)它在應(yīng)用程序生命周期中經(jīng)歷許多變化時(shí)。