加速 JavaScript 執行階段 (「配置取樣」分析類型)

若要識別昂貴的功能，請使用 [記憶體 ] 工具：

使用 [ 記憶體 ] 工具中的 [配置取樣] 來準確記錄呼叫的函數，以及每個函數需要多少記憶體。

將您的設定檔視覺化為火焰圖。

使用「配置取樣」分析類型來檢視 JavaScript 函數的記憶體配置

如果您發現 JavaScript 中的轉譯) 出現卡頓 (中斷，請使用 [配置取樣 分析] 類型來收集記憶體配置取樣設定檔。 取樣設定檔會顯示哪些函式配置了最多記憶體。

若要使用 Allocation 取樣 分析類型來檢視 JavaScript 函數的記憶體配置：

1. 在新視窗或索引標籤中開啟網頁，例如 Detached Elements 示範網頁。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   或者，在 Windows (按 Ctrl+Shift+I，Linux) 或 (macOS) 按 Command+Option+I。 DevTools 隨即開啟。

3. 在開發工具的 [活動列] 中，選取 [ 記憶體 () 工具：

   

   如果看不到 [記憶體] 工具，請按一下 [其他工具] () 按鈕，然後選取 [記憶體]。

4. 選取 [配置取樣 ] 選項按鈕。

   如果因為已顯示設定檔而未顯示 [ 配置取樣 選項] 按鈕，請按一下左上角的 [ 設定檔 ] 。

5. 在選取 JavaScript VM 執行個體 區段中，如果頁面上有背景工作角色，您可以選取該背景工作角色作為分析目標。

6. 在 「記憶體」 工具底部，按一下「 開始」 按鈕。

7. 與網頁互動。 例如，按一下示範網頁中的 [ 快速流量 ] 按鈕，然後按一下 [ 停止 ] 按鈕。

   根據您嘗試分析的內容，您可以重新整理頁面、與頁面互動，或只是讓頁面執行。

8. 在 [記憶體] 工具左上角，按一下 [停止堆積分析) 按鈕。

   或者，按一下 [記憶體 ] 工具底部的 [ 停止 ] 按鈕。 在 設定檔 提要欄位中的 取樣設定檔 區段中新增了一個設定檔：

   

   取樣設定檔會顯示依功能的記憶體配置明細。 預設檢視為 [重] ([由下而上]) 。 您可以根據下一節切換到 [ 圖表 ] 或 [ 樹狀] ([由上而下]) 檢視。

您也可以使用 主控台公用程式 API 從命令列記錄及群組設定檔。

變更取樣設定檔的檢視

若要變更記憶體配置取樣設定檔中的排序順序，請使用 [設定檔檢視模式 ] 下拉式清單，其最初顯示 [重] ([由下而上]) ：

功能表項目：

• Chart - 錄製內容的時間順序圖表。
• Heavy (由下而上) - 以記憶體配置順序列出應用程式的呼叫函式，並顯示每個函式的呼叫路徑。 預設檢視。
• 樹狀 (由上而下) - 顯示呼叫結構，從呼叫堆疊的頂端開始。

圖表

圖表 檢視模式 會按時間順序顯示錄製內容的圖表：

重 (由下而上)

[ 重 (由下而上]) 檢視模式會依效能影響列出函數，並可讓您檢查函數的呼叫路徑。 這是預設檢視：

樹狀 (由上而下)

樹 狀 (自上而下) 檢視模式顯示呼叫結構的整體情況，從呼叫堆疊頂部開始：

排除函數

當選取 [重 ([由下而上]) 或 [ 樹狀 (由上而下) ] 時， (選取 [ 圖表) ] 時，有數個按鈕可供使用， () 選取列時這些按鈕可供使用：

• 專注所選功能 (
• 排除選取的函數 ()
• 還原所有函數 ()

若要從記憶體配置取樣設定檔中排除函數，請選取取樣設定檔，然後按一下 [ 排除選取的函數 ] ([ ] 按鈕) 按鈕。 要求函式 (子) 的父) (以指派給子) 的已分配記憶體 (收費。

按一下 還原所有功能 () 按鈕，將所有排除的功能還原回錄製內容。

以圖表檢視記憶體配置取樣設定檔

圖表 檢視提供 隨時間變化的取樣設定檔的視覺表示。

錄製記憶體配置取樣設定檔之後，請將錄製內容檢視為火焰圖。 在 [設定檔檢視模式] 下拉式清單中選取 [圖表]， (最初顯示 [重] ([由下而上]) ) ：

火焰圖分為兩個部分：

index	部分	描述
1	概觀	整個錄製內容的鳥瞰圖。 長條的高度會對應至呼叫堆疊的深度。 因此，標準越高，呼叫堆疊越深。
2	呼叫堆疊	這是錄製期間呼叫之函式的深入檢視。 水平軸是時間，垂直軸是呼叫堆疊。 堆疊是從上而下組織的。 因此，頂部的函數稱為其下面的函數，依此類推。

函數是隨機著色的。 與其他面板中使用的顏色沒有相關性。 不過，函式在呼叫中的色彩一律相同，因此您可以觀察每個執行階段中的模式。

較高的呼叫堆疊不一定很重要;這可能只是表示呼叫了許多函數。 但寬條表示函數需要很長時間才能完成，因此這些是最佳化的候選項目。

放大錄製的特定部分

若要放大呼叫堆疊的特定部分，請按一下並在概觀中左右拖曳。 縮放之後，呼叫堆疊會自動顯示您選取的錄製內容部分。

檢視函數詳細資料

按一下函數，以在 [來源 ] 工具中檢視。

將游標停留在函數上以顯示名稱和時間資料：

詳細資料	描述
名稱	函數的名稱。
自我大小	目前叫用函數的大小，只包括函數中的陳述式。
大小總計	此函數及其呼叫的任何函數之目前叫用的大小。
URL	函式定義 base.js:261 的位置，格式為 where base.js 是定義函式的檔案名稱，也是 261 定義的行號。

使用減少垃圾來調查記憶體配置 ([包含物件] 核取方塊)

根據預設， [配置取樣 分析類型] 只會報告在錄製工作階段結束時仍處於作用中的配置。 使用配置取樣或時間軸分析類型的配置進行分析時，建立、移除，然後進行垃圾收集 (GC) 的物件不會顯示在記憶體工具中。

您可以信任瀏覽器來清除程式碼中的垃圾。 不過，請務必考慮到 GC 本身是一項昂貴的操作，多個 GC 可能會降低使用者對網站或應用程式的體驗。 在 [ 效能 ] 工具中錄製並開啟 [記憶體 ] 核取方塊時，您可以看到 GC 作業發生在陡峭的懸崖上， (堆圖中的) 突然減少：

藉由減少程式碼所建立的垃圾量，您可以減少每個個別 GC 的成本，以及 GC 作業的數量。

追蹤由 GC 捨棄的物件

若要追蹤由廢棄項目收集捨棄的物件：

1. 在 [記憶體 ] 工具中，選取 [ 配置取樣 選項] 按鈕。

2. 按一下 [包含主要 GC 捨棄的物件] 和 [包含次要 GC 捨棄的物件 ] 設定。

   

3. 按一下 [開始] 按鈕。

4. 在網頁上，執行您要調查的動作。

5. 完成所有動作後，按一下 停止 按鈕。

DevTools 現在會追蹤在錄製期間被垃圾收集 (GC) 的所有物件。 使用這些設定可以了解您的網站或應用程式產生了多少垃圾。 配置取樣所報告的資料可協助您識別產生最多垃圾的函數。

如果您正在調查僅在特定主要或次要 GC 作業期間進行 GC 處理的物件，請適當地設定設定，以追蹤您所關心的作業。 若要深入了解主要與次要 GC 之間的差異，請參閱 垃圾桶：Orinoco 垃圾收集器 |V8 JavaScript 引擎開發人員部落格。

注意事項

本頁面的部分內容是根據 Google 建立和分享 的作品進行修改，並根據知識 共享署名 4.0 國際授權條款中所述的條款使用。 原始頁面可在 此處 找到，由 Kayce Basques 和 Meggin Kearney 撰寫。

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。