前端内存泄漏

最新更新时间：2019年04月26日10:13:49

《猛戳-查看个人博客地图-总有你意想不到的惊喜》

本文内容：关于内存泄漏问题，产生的缘由、发生内存泄漏的特征或者表象、如何捕获或者监听是否发生内存泄漏、如何防范和解决内存泄漏问题。

概述

代码发生内存泄漏的问题，通常的应用中很难遇到，所以不少人对内存泄漏的知识很无感。前端内存泄漏的特征或者表象，浏览器崩溃或者浏览器自动刷新从新载入。

内存泄漏场景

在我过往的开发工做中，发生过两次内存泄漏事件：

第一次，2018年就任于爱奇艺期间，负责PC站点的直播视频-播放器内核开发，主要的工做内容是从服务器获取二进制视频源，在内核中进行解码和播放控制，初期没有进行JS内存释放操做，致使用户在看视频的过程当中浏览器崩溃。

• 解决方案：本地启动定时任务，每分钟监听一次视频的缓存池数据容量，当超过500M容量的时候，作删除冗余数据操做，这样保证了浏览器的单个标签页占用浏览器总内存固定且不会超负荷。

第二次，2019年就任于新东方期间，负责线上考试的一套系统开发，是嵌入到的微信小程序中的一个webview系统，学生经过手机拍照的方式上传答案，一套试卷有多道题，一道题有3张图片，经测试iPhone X拍出的单张照片在5-10M左右，若是不作本地应用的内存释放操做，整套试卷的答案图片容量超过100M，所以出现了答题过程当中的浏览器自动刷新从新载入现象。

• 解决方案：
• 第一，删除不在当前但是区域的DOM元素，减小浏览器的渲染引擎压力；
• 第二，作图片压缩策略操做，控制裁剪后的单张图片容量在500KB之内；
• 第三，增长内存释放操做，即声明的全部关于图片操做的临时变量，使用以后置null；

监听浏览器单个标签的内存占用状况

Chrome浏览器-菜单栏-窗口-任务管理器，可看到以下窗口，每一个标签页的内容占用空间

会发生内存泄漏的状况

• 全局变量
• 闭包
• 获取dom
• 定时器
• 回调
• 子元素引用
• 添加未移除

参考资料

• 无

感谢阅读，欢迎评论^-^

打赏我吧^-^