分析記憶體使用量資料 (JavaScript)

本主題說明 JavaScript 記憶體分析器。Visual Studio 2012 Update 1 已提供這項工具，用來針對使用 JavaScript 建置的 Windows 市集應用程式執行記憶體分析。如需示範如何使用這項工具的教學課程，請參閱教學課程：尋找記憶體流失 (JavaScript)。

檢視記憶體使用量資料

使用 Visual Studio 開啟您開發的 Windows 市集應用程式時，就可以使用 JavaScript 記憶體分析器。

若要執行 JavaScript 記憶體分析器

1. 如果您是從 Visual Studio 執行應用程式，請在 [偵錯] 工具列上的 [開始偵錯] 下拉式清單中按一下 [本機電腦]、[模擬器] 或 [遠端電腦]。

   如需這些選項的詳細資訊，請參閱從 Visual Studio 執行 Windows 市集應用程式。

2. 在 [偵錯] 功能表上指向 [JavaScript 記憶體分析]，然後按下列其中一個選項：

   • 啟動啟始專案：按一下這個選項即可啟動目前的啟始專案。如果您是在遠端電腦執行應用程式，必須按一下這個選項。

   • 啟動已安裝的應用程式套件：按一下這個選項即可選取已安裝且您要分析的應用程式。如果是在遠端電腦執行應用程式，則無法使用這個選項。

     當您無法存取原始程式碼時，可以使用這個選項分析安裝在電腦上之應用程式的記憶體使用量。如果這不是您開發的應用程式，但是您又希望分析應用程式的記憶體使用量，這個選項就很有用。

   • 附加到執行中的應用程式：按一下這個選項，即可從執行中的應用程式清單選取應用程式。如果是在遠端電腦執行應用程式，則無法使用這個選項。

     當您無法存取原始程式碼時，可以使用這個選項分析在電腦上執行之應用程式的記憶體使用量。

   當您啟動記憶體分析器時，可能會出現 [使用者帳戶控制] 要求您提供執行 VsEtwCollector.exe 的權限。請按一下 [是]。

3. 按 Alt+Tab 切換至 Visual Studio。

   JavaScript 記憶體分析器的摘要檢視隨即出現在 [診斷中樞] 索引標籤中。

記憶體使用量檢視

執行 JavaScript 記憶體分析器時，您可以查看下列記憶體使用量資料檢視：

• 摘要檢視.為執行中的應用程式提供記憶體使用量圖表，以及所有快照摘要磚的集合。這個檢視會在 [診斷中樞] 索引標籤中顯示。

• 檢視快照詳細資料.顯示單一快照的詳細記憶體使用量資料。

• 檢視快照差異.針對兩個選定快照，詳細顯示兩者之間的記憶體使用量資料差異值。

摘要檢視

摘要檢視可為執行中的應用程式提供記憶體使用量圖表，並提供所有快照摘要磚的集合。在這個檢視中，您可以執行像是擷取快照、分析摘要資訊以及巡覽至其他檢視等基本工作。

記憶體圖表可讓您即時檢視應用程式的處理序記憶體，包括私用位元組、原生記憶體和 JavaScript 堆積。圖表外觀如下所示：

記憶體圖表可讓您以捲動方式檢視處理序記憶體。

如果應用程式的程式碼中有加入任何程式碼剖析標記，記憶體使用量圖表中會顯示 [使用者標記] 三角形，表示執行到那段程式碼的時間。如需詳細資訊，請參閱 JavaScript 主控台命令。

記憶體圖表中顯示的某些記憶體是由 JavaScript 執行階段所配置。您無法在應用程式中控制此記憶體使用量。圖表中顯示的記憶體使用量會在您初次擷取快照時增加，之後每當您擷取一次快照，記憶體使用量會以最小幅度再增加一些。

檢視快照摘要

您可以按一下摘要檢視中的 [擷取堆積快照]，擷取應用程式目前記憶體使用量狀態的快照。摘要檢視中也會顯示快照摘要磚，提供 JavaScript 堆積的相關資訊和詳細資訊連結。如果您有兩個以上的快照，在任何相鄰的兩個快照中，後者會額外提供相較於前者的差異資料。

注意事項
在每次擷取快照之前，JavaScript 記憶體分析器都會強制執行記憶體回收。這有助於確保每次擷取快照的結果都更為一致。

下圖顯示先前已擷取快照情況下的快照範例。

以下是快照摘要中顯示的資訊：

• 快照標題和時間戳記。

• 堆積大小 (左邊的藍色文字)：這個數目包括 JavaScript 執行階段引擎加入至 JavaScript 堆積的 DOM 項目和物件。堆積大小可以連結到快照的 [主導者] 檢視。

• 差異堆積大小 (左邊的紅色或綠色文字)：這個值表示目前快照與上一個快照的堆積大小差異。如果記憶體有增加，這個值會呈現紅色，否則會呈現綠色。如果堆積大小相同，值則為 [無差異]。第一個快照的值只是 [基準] (灰色文字)。這個值可以連結到快照差異的 [主導者] 檢視。

• 物件計數 (右邊的藍色文字)：這個計數只代表在應用程式中建立的物件，其中也已經篩選掉了 JavaScript 執行階段建立的內建物件。這個物件計數可以連結到快照詳細資料的 [型別] 檢視。

• 物件差異數 (右邊的紅色或綠色文字)：這個值表示目前快照與上一個快照的物件計數差異。如果物件計數有增加，這個值會呈現紅色，否則會呈現綠色。如果物件計數相同，值則為 [無差異]。第一個快照的值只是 [基準] (灰色文字)。這個值可以連結到快照差異的 [型別] 檢視。

• 在擷取快照當時的螢幕擷取畫面。

檢視快照詳細資料

您可以快照詳細資料檢視中，查看每個快照的記憶體使用量詳細資訊。

您可以按一下摘要檢視之摘要快照的連結，檢視快照詳細資料。例如，快照摘要中的堆積大小連結會開啟快照詳細資料，其中預設顯示 [主導者] 檢視。

下圖顯示快照詳細資料中的 [型別] 檢視。

在快照詳細資料檢視中，您可以查看下列額外記憶體使用量資料檢視：

• 主導者：依照保留大小的順序顯示堆積中所有物件清單。

• 型別：依照物件型別，分組顯示物件的執行個體計數和總大小 (預設依照執行個體計數排序)。

• 根：從根物件到子參考，顯示整個物件樹狀結構。根據預設，子節點是依照 [保留大小] 一欄來排序，值最大的在頂端。

• DOM：顯示本身為標記 (DOM) 項目的物件及其保留大小 (預設依照保留大小排序)。

• WinRT：顯示 JavaScript 應用程式所參考的 Windows Managed 和 Unmanaged 物件。(預設依照保留大小排序)。

大部分檢視 (例如 [支配者] 檢視) 都會顯示類似的實值型別，這些值包括：

• 識別項：最能用來識別物件的名稱。例如，我們會顯示 ID 屬性值 (如果有使用的話) 來表示 HTML 項目。

• 型別：物件的型別名稱。

• 大小：物件的大小，但不包括任何參考之物件的大小。

• 保留大小：物件的大小總和加上沒有其他父物件之所有子物件的大小。這個總和實際上是物件保留的記憶體數量，因此如果您刪除物件，就會回復指定的記憶體數量。

• 計數：物件的執行個體數目。這個值只會出現在 [型別] 檢視中。

檢視快照差異

在 JavaScript 記憶體分析器中，您可以透過快照差異檢視來比較相鄰兩個快照。

在摘要檢視中，透過在快照摘要磚右上角的下拉式清單中按一下其他快照，您就能檢視差異快照詳細資料。

快照差異可讓您檢視有關主導者、型別、根、DOM 物件和 Windows 執行階段物件的差異資訊。

快照差異可顯示相鄰兩個快照的堆積中加入的所有物件。在差異 [根] 檢視 (和參考圖形) 中，淺灰色文字表示物件本身於上一個快照就存在，但是其子系卻不存在。

下圖顯示快照差異中的 [主導者] 檢視。

在快照差異檢視與檢視快照詳細資料檢視中，像是 [主導者] 檢視的這類檢視都相同。快照差異檢視與快照詳細資料檢視都會顯示相同的實值型別，但是前者還包含下列額外的值：

• 大小差異：目前快照和比較目標快照 (較舊的快照) 中的物件大小差異，其中不包括任何參考之物件的大小。

• 保留大小差異：目前快照和比較目標快照 (較舊的快照) 中的物件保留大小差異。保留大小包含物件大小加上沒有其他父物件之所有子物件的大小。這個保留大小實際上是物件保留的記憶體數量，因此如果您刪除物件，就會回復指定的記憶體數量。

• 計數差異：目前快照和比較目標快照中的物件執行個體數目差異。這個值只會出現在 [型別] 檢視中。

在根檢視中顯示

在 [主導者]、[型別]、[DOM] 和 [WinRT] 檢視中，您可以查看特定物件與 Global 物件的關聯性。使用這項功能，您可以在 [根] 檢視中輕鬆找到已知物件，而不必搜尋整個 Global 物件樹狀結構。

若要使用這項功能，請以滑鼠右鍵按一下 [主導者]、[型別]、[DOM] 或 [WinRT] 檢視中的識別項，然後按一下 [在根檢視中顯示]。

篩選資料

在 [主導者]、[型別]、[DOM] 和 [WinRT] 檢視中，您可以搜尋特定識別項來篩選資料。若要搜尋識別項，請在 [識別項篩選] 文字方塊中輸入值。當您開始輸入字元時，不包含具型別字元的識別項會被篩選掉。

每個檢視都有自己的篩選機制，因此各個檢視之間的篩選資訊均各自獨立。

檢視參考

[主導者]、[型別]、[DOM] 和 [WinRT] 檢視的下方窗格都包含 [參考圖形]，可讓您用來檢視共用參考。如果您在上方窗格中選取物件，[參考圖形] 會顯示指向選定物件的參考清單。

如果您要取得一般說明來協助識別對等物件，可以在上方窗格右上角的設定下拉式清單中按一下 [顯示物件 ID] 取得說明。當您按一下這個選項時，物件 ID 會出現在 [識別項] 清單中的物件旁邊。具有相同 ID 的物件都是共用的參考。

顯示內建值

在 [主導者]、[型別]、[DOM] 和 [WinRT] 檢視中，您可以顯示內建物件。根據預設，這些檢視只會顯示應用程式中建立的物件。這有助於篩選掉不需要的資訊並隔離應用程式相關的問題。當您要檢視 JavaScript 執行階段為應用程式產生的所有物件時，這就相當實用。您可以在 JavaScript 記憶體分析器中檢視這些物件。

若要顯示這些物件，請在窗格右上角的設定下拉式清單中按一下 [顯示內建]。

診斷工作階段檔案

診斷快照摘要以及關聯的詳細資料檢視會儲存為 .diagsession 檔案。[方案總管] 會在 [診斷工作階段] 資料夾中顯示之前的診斷工作階段。在 [方案總管] 中，您可以開啟先前的工作階段，或者刪除或重新命名這些檔案。

JavaScript 主控台命令

JavaScript 記憶體分析器支援下列兩個 JavaScript 主控台命令，您可以在程式碼中使用這些命令，協助隔離發生記憶體問題的那段程式碼。如果您將這些命令加入至應用程式，並且在記憶體分析器以外的內容中執行應用程式，這些命令就會擲回例外狀況 (但是您可以先測試這些命令是否存在然後才使用。在工作階段早期的啟動階段，這些命令都還不會存在)。

• console.takeHeapSnapshot 可用來擷取在 JavaScript 記憶體分析器中顯示的堆積快照。

• console.profileMark 可用來設定程式碼剖析標記 ([使用者標記] 三角形)，這個標記會顯示在摘要檢視中記憶體圖表的時間軸內。這個命令會使用一個代表事件描述的字串引數，而且在記憶體圖表中會以工具提示的方式呈現。這段描述不能超過 100 個字元。

在下列程式碼範例中，會示範如何安全地呼叫 takeHeapSnapshot。

    if (console && console.takeHeapSnapshot) { console.takeHeapSnapshot(); }

在下列程式碼範例中，會示範如何安全地呼叫 profileMark。

    if (console && console.profileMark) { console.profileMark("Initialized"); }

識別記憶體問題的提示

診斷記憶體使用量問題時，可以參考下列提示：

• 使用快照差異的 [主導者] 檢視，嘗試快速識別主要記憶體問題。

• 使用在根檢視中顯示來協助識別整個記憶體階層架構中物件的參考位置。

• 如果難以識別造成記憶體問題的原因，請使用各種檢視 (例如 [主導者] 和 [型別]) 尋找其共同特徵，例如相關物件和型別。

• 考慮暫時修改程式碼來隔離問題，看看這麼做是否有所幫助。例如，您可能要：

  • 與記憶體分析器搭配使用 JavaScript 主控台命令 console.takeSnapshot 和 console.profileMark。

    您可以使用這些命令，隔離無法透過手動按一下 [擷取堆積快照] 隔離的問題。

  • 建立 JavaScript 記憶體分析器的檢視 (例如 [主導者] 檢視) 可以輕鬆找到的測試物件。例如，您可以將大型物件附加至其他物件，查看特定物件或項目是否已進行記憶體回收。

• 尋找巡覽至新頁面之後在記憶體中不慎保留的物件，這些物件是造成記憶體問題的常見原因。例如，不當使用 URL.CreateObjectUrl 函式就可能會導致這個問題。

請參閱

工作

教學課程：尋找記憶體流失 (JavaScript)