9月23日，本期掘力计划以"性能专场"为主题，邀请了来自字节跳动 Web Infra 团队的浏览器内核开发工程师庞进林，为我们带来题为《基于定制 Chromium 的前端内存泄露监控分析实践》的演讲。
庞进林讲师来自字节跳动的 Web Infra 团队，2020年加入字节跳动，三年来一直从事基于谷歌 Chromium 内核对公司移动端 Android WebView、桌面端 Electron、爬虫 Headless 进行内核级性能优化、稳定性优化、功能增强等工作，他在浏览器内核定制方面具有丰富的实践经验。
本次演讲的主题是基于定制 Chromium 的前端内存泄露监控分析实践。内存泄露一直是影响前端性能的重要因素，严重时可能导致浏览器崩溃，严重影响用户体验。演讲从内存泄露的业务背景和技术背景出发，介绍了字节跳动在内存泄露监控、自动化测试、DevTools 扩展等方面的实践，以更好地发现、定位和修复内存泄露问题，保证良好的用户体验。
Electron内存泄露背景
庞进林讲师从业务和技术两个方面分析了 Electron 应用内存泄露的背景。首先从业务背景来看，内存泄露直接导致的应用崩溃，是 Electron 应用中最严重的稳定性问题之一。比如某产品 PC 版过去半年 OOM 崩溃率大幅下降 90% 以上，可见内存泄露的严重影响。
内存泄露还会间接导致页面卡顿、用户机器发热等用户体验问题。所以内存泄露不仅影响稳定性，还关系到用户体验。
从技术背景来看，Electron 应用天生就存在内存泄露的风险：
- 第一，Chromium 内核本身内存占用就比较高，即使一个 Hello World 的网页也需要占用 500M 内存。
- 第二，前端开发者更关注 Node.js 和 Web 开发，对底层浏览器内核不够了解。不太清楚资源加载对应的内存大小。
- 第三，Web 开发更追求速度，不像原生开发会细致控制内存。并且 JS 有自动回收机制，开发者并不特别关心回收策略。
- 第四，Web API 中很少有内存监控的接口，只有简单的 performance.memory 接口。不能获取细粒度的内存分布数据。但是 Chromium 内核本身提供了非常丰富的内存调试接口，可惜没有被前端消费。
- 第五，Chrome DevTools 中的内存工具也较难上手，前端开发者缺少低成本的内存测试调试手段。
综上所述，Electron 应用存在明显的内存泄露风险，有必要从内核级别进行一些改进和优化。
内存监控数据指标体系
第一，构建可还原 OOM 崩溃场景的指标体系。通过定制的崩溃上报组件，可以在网页崩溃时收集各种内存指标，尽可能还原崩溃场景。这些指标可以分为四类：
- 系统级别和模块级别的内存消耗监控
- V8 和 PartitionAlloc 等内存分配器的细粒度内存消耗
- 崩溃发生时的场景信息，如当前页面、版本、操作等
- 各类网页对象的数量，如 DOM 节点、事件监听器等
第二，构建通用的运行时内存监控指标体系。使用 PerfMonitor 组件持续采集一些通用内存指标，平衡监控性能。
第三，基于数据指标实现防劣化监控、报警、数据分析。借助公司数据中台，进行精准的内存数据分析，配置指标报警，并推送给相关负责人，实现内存问题的闭环。
通过构建全面的内存数据指标体系，可以更及时发现内存泄露问题，并采取有针对性的优化措施。这是 Electron 应用优化内存的重要一环。
自动化内存测试能力介绍
构建的自动化 UI 测试用例，主要基于两类场景：一是用户高频操作场景，比如视频播放；二是从线上 OOM 数据分析出的易泄露场景，比如弹幕发送。
在自动化测试运行时，会收集非常丰富的内存数据指标，比如系统内存、Chrome Tracing 数据、JS 堆内存快照等。收集到的数据会进行自动化消费和分析，产出测试报告。报告中会包含堆内存快照分析、Tracing 分析、MemLab 等自动化分析结果，可以直观发现内存泄露问题。
除了产出报告，还会配置实时的数据看板，观察测试过程中内存指标的实时变化，比如监控播放器相关内存的增长情况。
通过上述自动化内存测试的能力，可以大幅提升内存问题检测效率，使内存泄露可以在代码合入到主分支之前就被发现和修复，避免影响到线上用户。
DevTools 内存调试工具扩展介绍
庞进林讲师介绍了 Chrome DevTools 现有的内存调试工具，包括 Memory 面板、Performance 面板和 Performance Monitor。这些工具功能各有侧重，但整体来说内存指标不够丰富和直观。
在此基础上，TTElectron 团队开发了 EDT 扩展，以 DevTools 插件形式增加了内存调试能力。EDT 提供丰富的内存指标，并以图表形式实时展示指标变化趋势，更直观。EDT 扩展支持自定义指标面板，用户可以根据自己场景选择不同内存数据进行关注。
最后介绍了 EDT 的最佳实践，即熟悉各指标含义，通过 EDT 观察内存异常走势，利用 Memory 面板分析快照关联对象，最终定位代码导致内存泄露的根源。EDT 扩展与 DevTools 的 Memory、Performance 面板互为补充，共同构成了一套更强大的内存调试方案，可以显著提高内存问题定位和修复效率。
通过 DevTools 功能扩展，前端开发者可以在日常开发过程中就高效发现和定位内存泄露问题，无需等待自动化测试或线上监控才进行排查。
总结
本次演讲系统地介绍了字节跳动基于定制 Chromium 在内存泄露监控和分析方面的实践。这些实践为提高 Web 应用的性能，改善用户体验提供了有价值的参考。相信对于广大 Web 开发者，特别是使用 Electron 和 WebView 的开发者来说，都能从中获益匪浅，学习到许多优化 Web 应用性能的方法和经验。
掘力计划
掘力计划由稀土掘金技术社区发起，致力于打造一个高品质的技术分享和交流的系列品牌。聚集国内外顶尖的技术专家、开发者和实践者，通过线下沙龙、闭门会、公开课等多种形式分享最前沿的技术动态。