如何在瀏覽器內存中獲取javascript對象的大小和數量

Question

我知道大多數人會指向chrome profiler heap snapshot，但是在空白頁面上（沒有js沒有CSS只是html> body），它顯示了8mb堆大小和12到3萬對象取決於他的情緒，所以對於這項任務來說這是完全沒用的工具，我認爲這個堆分析器對它顯示的數據有自己的謙虛看法，而不是事實，儘管其餘的chrome開發工具非常棒。

基本上我的骨幹1/1頁的應用程序不斷增加的內存，即使我做一切可能的垃圾收集舞蹈，JSON.stringify(Obj).length拋出action not secure上大多數對象，我怎麼可以跟蹤那些殭屍更容易然後嘗試和錯誤。

Answer 1

你不喜歡Chrome開發者工具，但據我所知，他們是你得到的最好的。你只需要明智地使用它們。

假設您想測試應用程序中的某些操作是否泄漏內存。它可能是渲染視圖，或者獲取一些新的數據。我們稱之爲Action。

爲了找出保留了多少內存以及保留了多少內存，首先需要獲得一個可測量的基線並消除噪音。你需要三個步驟來實現這些目標。

1. 熱身

   啓動應用程序（瀏覽到您的網站）。執行Action。採取堆快照。該快照被丟棄，但它會運行GC併爲您提供一個乾淨的平板。熱身還可以確保你沒有得到你的衡量數據的任何模糊：腳本評估，初始加載資源異步等

2. 基線

   執行Action三次。採取堆快照。這是我們將比較我們的記憶切除和保留的基線。如果執行路徑中存在一些小的變化，我們會執行三次以獲得合理的平均值。請務必嘗試每次重複Action完全相同的方式。

3. 測量

   執行Action三次。採取堆快照。

現在您將擁有三個快照。第一個將被丟棄，但我們感興趣的是摘要對於在快照2和3之間分配的對象以及增量從快照3到快照2的比較。您可以從底部找到這些視圖/配置文件視圖的狀態欄。

你基線和測量 shapshots之間看到的數據是Action真正的內存配置文件。之後，你只需要知道如何正確解釋數據。爲此，我建議Google's documentation on the profiler。

我不認爲目前存在更好的工具或方法。如果有的話，我很樂意聽到它。