干货 | 携程桌面应用的前端内存优化与监控

作者简介

 

吕萌萌，携程资深前端开发工程师，关注前端性能优化与前端框架建设。

一、背景

桌面应用的前端场景不同于传统前端，具有使用者停留时间长，功能复杂且高度聚集在单一页面等特征，因此带来了不同的技术挑战，其中很重要的一点是内存泄漏问题。

1）什么是内存泄漏？

内存泄漏[1]（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。

2）JavaScript的内存管理

像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。相反，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理[2]。

3）案例

以携程的IM+项目为例：IM+将多种沟通渠道整合于一体，使客服人员能够全方位地触达用户，提供便捷、全面的服务，进而实现优质的用户体验。所以，在IM+的主页面当中，同时聚集了IM、电话和邮件三大块功能，为了提升坐席的效率和服务质量，还有众多辅助信息模块、回复超时提示模块，也就导致主页面功能非常复杂。

                           

因此，主页面的功能复杂度、代码复杂度都很高，在大量需求的快速迭代期间，一些细节点考虑不够或者某些API使用方式不正确，就会比较容易发生内存泄漏问题。另外，又因为使用者长时间不关闭应用，一旦发生该问题，将会随着时间的推移，泄漏的内存量越积越多ÿ