检测内存泄漏

内存泄漏可能会降低应用的性能和用户体验。识别和解决这些泄漏对于创建高效且响应迅速的应用至关重要。 Vega Studio是Visual Studio Code (VS Code) 中用于Vega应用开发的扩展，具有一个名为“MemLab”的功能。该功能通过分析JavaScript堆快照来检测适用于Vega的React Native应用中的内存泄漏。MemLab可以识别潜在的内存问题，包括：

React Native虚拟DOM中类似于分离的文档对象模型 (DOM) 的对象。
JavaScript对象中的循环引用。
保留了组件或事件侦听器以防止垃圾回收。

适用于Vega的React Native及其与React Native的关系 适用于Vega的React Native是亚马逊开发的React Native的树外平台，用于构建跨平台应用。它为各种亚马逊设备和平台创建高效且响应迅速的应用。适用于Vega的React Native以React Native为基础构建，继承了它的许多概念和规则。与React Native一样，适用于Vega的React Native使用基于组件的架构，让您编写一次即可在多个平台上部署。 适用于Vega的React Native中的内存管理 与React Native一样，在适用于Vega的React Native应用中，适当的内存管理至关重要。在框架处理内存管理时，注意长期对象、事件侦听器的泄漏情况，以及复杂状态。 内存泄漏检测的重要性 识别和修复内存泄漏对于维护适用于Vega的React Native应用的性能和稳定性至关重要，尤其是在资源有限的设备上。这就是诸如MemLab之类的工具在开发过程中大显身手之处。本页提供有关以下方面的指导：

创建有意造成内存泄漏的适用于Vega的React Native应用示例。
在应用执行的不同阶段捕获堆快照。
使用MemLab分析这些快照并识别内存泄漏。
解读MemLab的输出以了解泄漏的性质和来源。

先决条件

安装Node.js。
安装Memlab：
npm install -g memlab

步骤1：创建示例应用

出于测试目的，使用以下命令创建一个示例应用，其中存在故意造成的示例泄漏：

kepler project generate --template hello-world --name keplersampleapp --packageId com.amazon.keplersampleapp --outputDir keplersampleapp

示例app.js文件

以下文件示出了演示内存泄漏场景的示例应用的代码片段；并提供了创建、清除和分析内存泄漏的工具。

import React, { useRef, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const detachedDOMRef = useRef([]);
  const [snapshotInfo, setSnapshotInfo] = useState(null);
  const [focusedButton, setFocusedButton] = useState(null);

  // 用于创建分离DOM元素的函数（严重内存泄漏）
  const createDetachedDOMLeak = () => {
    console.log('创建分离的DOM元素...');
    const detachedElements = [];
    for (let i = 0; i < 10000; i++) {
      // 创建表示分离的DOM元素的对象
      const element = { id: i, name: `分离的元素${i}` };
      detachedElements.push(element);
    }
    detachedDOMRef.current = detachedElements; // 保留引用，而不是在实际的DOM中
    console.log('使用10,000个元素创建了分离DOM泄漏');
  };

  // 用于清除内存泄漏的函数
  const clearLeaks = () => {
    console.log('清除所有泄漏...');
    detachedDOMRef.current = []; // 清除引用
    console.log('所有泄漏已清除');
  };

  // 模拟堆快照拍摄
  const takeHeapSnapshot = async () => {
    console.log('正在拍摄堆快照...');
    const snapshot = {
      detachedDOMSize: detachedDOMRef.current.length,
    };
    if (global.__CollectHeapSnapshot__) {
      global.__CollectHeapSnapshot__();
    }
    setSnapshotInfo(snapshot);
    console.log('堆快照已拍摄：', snapshot);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Memory Leak Demo</Text>

      <View style={styles.boundary}>
        <View style={styles.buttonRow}>
          <Pressable
            onPress={createDetachedDOMLeak}
            onFocus={() => setFocusedButton('createDetachedDOMLeak')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'createDetachedDOMLeak' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>Create Detached DOM Leak</Text>
          </Pressable>

          <Pressable
            onPress={clearLeaks}
            onFocus={() => setFocusedButton('clearLeaks')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'clearLeaks' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>Clear Leaks</Text>
          </Pressable>

          <Pressable
            onPress={takeHeapSnapshot}
            onFocus={() => setFocusedButton('takeHeapSnapshot')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'takeHeapSnapshot' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>Take Snapshot</Text>
          </Pressable>
        </View>
      </View>

      {snapshotInfo && (
        <Text style={styles.snapshotText}>
          Snapshot taken: {snapshotInfo.detachedDOMSize} detached DOM elements
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0e0e0',
  },
  text: {
    fontSize: 24,
    marginBottom: 20,
    textAlign: 'center',
  },
  boundary: {
    padding: 20,
    borderWidth: 2,
    borderColor: '#333',
    backgroundColor: '#ffffff',
    borderRadius: 10,
 },
 buttonRow: {
 flexDirection: 'row',
 justifyContent: 'center',
 },
 button: {
 width: 150,
 height: 50,
 marginHorizontal: 5,
 borderRadius: 5,
 alignItems: 'center',
 justifyContent: 'center',
 backgroundColor: '#007bff',
 },
 focusedButton: {
 backgroundColor: '#003f7f',
 color: '#000', // 焦点上有黑色文字
 },
 buttonText: {
 color: '#fff',
 fontSize: 16,
 },
 snapshotText: {
 marginTop: 20,
 fontSize: 16,
 color: '#333',
 },
});

步骤2：构建您的应用

运行以下命令：

npm install

npm run build:app

步骤3：运行应用

运行Vega虚拟设备。
kepler virtual-device start

在Vega虚拟设备上运行您的应用：

kepler run-kepler <Vpkg path> <App ID> -d VirtualDevice

步骤4：捕获和复制堆快照

在应用运行时，单击Take Snapshot（拍摄快照）按钮以捕获设备上的堆快照。
选择Create Detached DOM Leak（创建分离的DOM泄漏）按钮以生成10,000个内存泄漏元素。
重新拍摄快照。
选择Clear Leaks（清除泄漏）按钮以移除模拟内存泄漏的元素。

拍摄最后的快照。

当您单击Take Snapshot按钮时，日志会显示系统保存快照文件的位置。

ls /home/app_user/packages/<应用>/data/ -l
total 39764
-rw-r—r-- 1 app_user 30097 26 2024-10-17 08:56 shared_preferences.json
-rw-r—r-- 1 app_user 30097 6335533 2024-10-17 08:37 snapshot-17-10-2024-08-37-08.heapsnapshot
-rw-r—r-- 1 app_user 30097 8081408 2024-10-17 08:37 snapshot-17-10-2024-08-37-25.heapsnapshot
-rw-r—r-- 1 app_user 30097 6336519 2024-10-17 08:39 snapshot-17-10-2024-08-39-27.heapsnapshot
-rw-r—r-- 1 app_user 30097 9492333 2024-10-17 08:39 snapshot-17-10-2024-08-39-36.heapsnapshot
-rw-r—r-- 1 app_user 30097 10434707 2024-10-17 08:40 snapshot-17-10-2024-08-39-55.heapsnapshot

将快照文件复制到本地计算机。使用拍摄的堆快照，可以分析和识别潜在的内存泄漏。

步骤5：运行MemLab

要在快照上运行MemLab，请使用以下命令格式。

memlab find-leaks --baseline <初始快照> --target <泄漏后快照> --final <清除后快照> --trace-all-objects

当您运行该命令时，MemLab会执行以下操作：

将所有快照加载到内存中。
比较基准和目标快照以识别新对象。
分析这些新对象在最终快照中的持久性。
跟踪对象引用以了解保留模式。

MemLab命令结构解释

memlab find-leaks命令是MemLab识别内存泄漏的核心功能。以下参数是可选的：

—baseline <初始快照> - 指定在引入任何潜在泄漏之前拍摄的初始堆快照。它可以作为参考点。
—target <泄漏后快照> - 指定引入潜在泄漏后拍摄的快照。MemLab将快照与基准进行比较，以确定可能存在泄漏的新对象。
—final <清除后快照> - 指定在尝试清除泄漏后拍摄的快照。它可以帮助MemLab确定对象是实际在泄漏还是只是处于一种正常应用状态。
--trace-all-objects - 指示MemLab跟踪所有对象，从而提供更全面的分析，但可能会增加处理时间。

MemLab输出示例

memlab find-leaks --baseline snapshot-17-10-2024-08-27-13.heapsnapshot --target snapshot-17-10-2024-08-27-29.heapsnapshot --final snapshot-17-10-2024-08-27-52.heapsnapshot --trace-all-objects
Alive objects allocated in target page:
┌─────────┬─────────────────────────────────────────────────────────┬───────────┬───────┬──────────────┐
│ (index) │ name │ type │ count │ retainedSize │
├─────────┼─────────────────────────────────────────────────────────┼───────────┼───────┼──────────────┤
│ 0 │ 'JSArray'  │ 'object' │ 305  │ '1.1MB' │
│ 1 │ 'JSObject(id, name)' │ 'object' │ 10000 │ '1.1MB' │
│ 2 │ 'DictPropertyMap'  │ 'object' │ 79 │ '122.1KB' │
│ 3 │ 'HiddenClass'  │ 'object' │ 71 │ '92.6KB'  │
│ 4 │ 'BoxedDouble'  │ 'object' │ 1511 │ '36.2KB'  │
│ 5  │ 'JSObject(memoizedState, baseState, baseQueue, queu...' │ 'object' │ 498  │ '23.9KB'  │
│ 6 │ 'Environment'  │ 'object' │ 287  │ '14.7KB'  │
│ 7 │ 'JSFunction' │ 'closure' │ 185  │ '8.8KB' │
│ 8 │ 'JSObject(validated)'  │ 'object' │ 155  │ '7.4KB' │
│ 9  │ 'JSObject($$typeof, type, key, ref, props, ...)' │ 'object' │ 155  │ '7.4KB' │
│ 10 │ 'JSObject(tag, create, destroy, deps, next)' │ 'object' │ 132  │ '6.3KB' │
│ 11 │ 'Detached FiberNode' │ 'object' │ 12 │ '5.5KB' │
│ 12 │ 'JSObject(value, children)'  │ 'object' │ 66 │ '3.1KB' │
│ 13 │ 'HashMapEntry' │ 'object' │ 61 │ '2.9KB' │
│ 14 │ 'JSObject(style, children)'  │ 'object' │ 58 │ '2.7KB' │
│ 15 │ 'warnAboutAccessingRef'  │ 'object' │ 54 │ '2.5KB' │
│ 16 │ 'warnAboutAccessingRef'  │ 'closure' │ 54 │ '2.5KB' │
│ 17 │ 'JSObject(lastEffect, stores)' │ 'object' │ 48 │ '2.3KB' │
│ 18 │ 'HiddenClass(Dictionary)'  │ 'object' │ 45 │ '2.1KB' │
│ 19 │ 'HostObject' │ 'object' │ 43 │ '2KB' │
└─────────┴─────────────────────────────────────────────────────────┴───────────┴───────┴──────────────┘
Sampling trace due to a large number of traces:
 Number of Traces: 10100
 Sampling Ratio: 49.5%
MemLab found 5 leak(s)
Number of clusters loaded: 0

--Similar leaks in this run: 4956--
--Retained size of leaked objects: 1.1MB--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-57 (element)---> [Environment] (object) @226263 [48 bytes]
 —-0 (internal)---> [JSObject(current)] (object) @47915 [1.1MB]
 —-directProp0 (internal)---> [JSArray] (object) @222185 [1.1MB]
 —-9999 (element)---> [JSObject(id, name)] (object) @191663 [112 bytes]
 -—class (internal)---> [HiddenClass] (object) @117709 [300 bytes]

--Similar leaks in this run: 22--
--Retained size of leaked objects: 2.9KB--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-2 (element)---> [Detached FiberNode RCTView] (object) @69 [384 bytes]
 —-pendingProps (property)---> [JSObject(accessibilityViewIsModal, isTVSelectable, hitSlop, alexaEntityType, alexaExternalIds, ...)] (object) @228861 [680 bytes]
 —-onBlur (property)---> [onBlur] (closure) @45137 [128 bytes]
 —-prototype (property)---> [onBlur] (object) @224283 [48 bytes]

--Similar leaks in this run: 11--
--Retained size of leaked objects: 560 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-34 (element)---> [JSObject(Dictionary)] (object) @133 [26.2KB]
 —-console (property)---> [JSObject(error, info, log, warn, trace, ...)] (object) @78609 [4.8KB]
 —-directProp1 (internal)---> [JSFunction] (closure) @87937 [256 bytes]
 —-environment (internal)---> [Environment] (object) @87913 [208 bytes]
 —-parentEnvironment (internal)---> [Environment] (object) @87801 [32 bytes]
 —-0 (internal)---> [JSObject(enable, disable, registerBundle, log, setup)] (object) @85777 [3.2KB]
 —-directProp4 (internal)---> [setup] (closure) @88235 [48 bytes]
 —-environment (internal)---> [Environment] (object) @88203 [2.6KB]
 —-11 (internal)---> [JSArray] (object) @88225 [2.1KB]
 —-4 (element)---> [JSArray] (object) @222491 [200 bytes]

--Similar leaks in this run: 1--
--Retained size of leaked objects: 64 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-57 (element)---> [Environment] (object) @226263 [48 bytes]
 —-parentEnvironment (internal)---> [Environment] (object) @47913 [2KB]
 —-7 (internal)---> [JSObject(container, text, boundary, buttonRow, button, ...)] (object) @77759 [712 bytes]
 —-snapshotText (property)---> [JSObject(marginTop, fontSize, color)] (object) @77737 [708 bytes]
 —-class (internal)---> [HiddenClass] (object) @27707 [660 bytes]
 —-forInCache (internal)---> [SegmentedArray] (array) @224539 [64 bytes]

--Similar leaks in this run: 10--
--Retained size of leaked objects: 40 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-3 (element)---> [(RuntimeModules)] (synthetic) @9 [15.4KB]
 —-378 (element)---> [, ] (symbol) @117483 [4 bytes]

了解MemLab的输出

MemLab的输出包含以下关键元素。

Alive objects allocated in the target page（在目标页面中分配的活动对象）

此部分显示应用操作或更改后仍存在于内存中的对象。此列表指出了潜在的内存保留问题，并包含每个对象的以下详细信息：

name - 对象名称或其结构类型。
type - 该对象是“对象”（如JSObject、JSArray等）还是“闭包”（保留内存的函数）。
count - 每种对象类型的实例数。
retainedSize - 这些对象保留的总内存。

示例

JSArray (Object Type) - 305个实例，保留1.1MB的内存。
JSObject(id, name) - 10,000个实例，也保留1.1MB的内存。

Sampling trace due to a large number of traces（由于大量跟踪而导致的采样跟踪）

本节显示，由于有10,100条跟踪，MemLab使用了49.5％的采样率来进行高效处理。

MemLab found X leaks（MemLab发现了X个泄漏）

在示例中，MemLab发现了5个泄漏。对于每个内存泄漏，输出列出的内容包含：

类似泄漏次数 - 该工具检测到类似泄漏模式的次数。
泄漏对象的保留大小 - 泄漏对象保留的总内存。
泄漏跟踪 - 对象的互连方式以及垃圾收集器无法收集它们的原因。

Garbage Collection (GC) roots（垃圾回收 [GC] 根目录）

这些根目录是保留在内存中的对象的入口点，并可防止其他对象遭遇垃圾回收 (GC)。该跟踪显示了GC根如何通过引用保持对象存活，路径可以追溯到JSObjects、JSArrays和闭包引用。 示例1

Leak pattern: 4,956 similar leaks, retaining 1.1MB of memory.
- JSObject(current) → JSArray → JSObject(id, name).

此跟踪表明JSArray保留了对10,000个JSObject(id, name) 对象的引用，以防止它们遭遇垃圾回收。 示例2 Leak pattern: 22 similar leaks, retaining 2.9KB of memory. 跟踪涉及Detached FiberNode RCTView对象，该对象是React Native视图系统的一部分。诸如onBlur之类的事件处理程序即使在代码删除了对象后也可能通过不必要地保留对象来造成泄漏。

使用MemLab分析快照

检查Alive objects allocated in target page部分以查看保留的对象。
查看MemLab found [X] leaks（MemLab发现 [X] 个泄漏）一行，看看MemLab发现了多少个不同的泄漏。

记下类似泄漏的数量和总保留大小。
检查物体跟踪以了解系统如何保留对象。
注意意外保留，例如分离的DOM元素或大型数组。

解决泄漏

您可以通过执行以下操作来解决应用中的泄漏问题：

识别泄漏对象（例如，分离的DOM元素、未清除的事件侦听器）中的模式。
在您的应用中找到相应的代码。
实施修复，例如正确卸载组件、清除数组或删除事件侦听器。

验证修复

您可以通过执行以下操作来验证修复：

使用已实施的修复重建并重新运行您的应用。
重复快照和分析过程。
确认先前发现的泄漏不再存在于MemLab输出中。

开发 Vega 应用

先决条件

步骤1：创建示例应用

示例app.js文件

步骤2：构建您的应用

步骤3：运行应用

步骤4：捕获和复制堆快照

步骤5：运行MemLab

MemLab命令结构解释

MemLab输出示例

了解MemLab的输出

Alive objects allocated in the target page（在目标页面中分配的活动对象）

Sampling trace due to a large number of traces（由于大量跟踪而导致的采样跟踪）

MemLab found X leaks（MemLab发现了X个泄漏）

Garbage Collection (GC) roots（垃圾回收 [GC] 根目录）

使用MemLab分析快照

解决泄漏

验证修复

相关主题

​先决条件

​步骤1：创建示例应用

​示例app.js文件

​步骤2：构建您的应用

​步骤3：运行应用

​步骤4：捕获和复制堆快照

​步骤5：运行MemLab

​MemLab命令结构解释

​MemLab输出示例

​了解MemLab的输出

​Alive objects allocated in the target page（在目标页面中分配的活动对象）

​Sampling trace due to a large number of traces（由于大量跟踪而导致的采样跟踪）

​MemLab found X leaks（MemLab发现了X个泄漏）

​Garbage Collection (GC) roots（垃圾回收 [GC] 根目录）

​使用MemLab分析快照

​解决泄漏

​验证修复

​相关主题

先决条件

步骤1：创建示例应用

示例app.js文件

步骤2：构建您的应用

步骤3：运行应用

步骤4：捕获和复制堆快照

步骤5：运行MemLab

MemLab命令结构解释

MemLab输出示例

了解MemLab的输出

Alive objects allocated in the target page（在目标页面中分配的活动对象）

Sampling trace due to a large number of traces（由于大量跟踪而导致的采样跟踪）

MemLab found X leaks（MemLab发现了X个泄漏）

Garbage Collection (GC) roots（垃圾回收 [GC] 根目录）

使用MemLab分析快照

解决泄漏

验证修复

相关主题