一次JS内存问题排查

先说两个概念:

1、闭包

闭包指有权访问另一个函数作用域中的变量的函数。(和匿名函数是两个概念。
值得注意的是:内部函数将会把外部函数的活动对象添加到它的作用域链中,并且外部函数执行完成,其活动对象任然会留在内存中,直至内部函数被销毁。(参见:《javascript高级程序设计》)

2、GC回收

简单的理解就是当该对象不可达时,该内存回收。如果任然可以访问到该对象,则仍驻留在内存。

排查步骤:
1、通过测试定位到是某一操作后内存占用直接翻了一倍。
2、分析前后内存快照,发现有对象实例数量翻了一倍。
这里写图片描述
3、分析代码,发现对象未释放。优化后内存较少一半。
4、同时发现闭包占用内存比较高,但前后一致。(闭包会占用内存但不是内存泄漏

总结:
简化下遇到的问题。

   var _instance = null;
   var flow = function(){ }
   var normal = {
       _flow : null
   }
   _instance = new flow();
   normal._flow = _instance;

当执行 _instance = null;后,由于normal._flow保持了引用,所有内存中仍然存在flow实例。
同时项目中normal是闭包中对象,所有闭包内存也比较大。(?)

在前端开发中,诊断和解决内存溢出问题(OOM)需要结合内存泄漏排查、性能分析和代码优化等手段。以下是诊断和解决前端内存溢出问题的常用方法和工具。 ### 一、内存溢出的常见原因 前端内存溢出通常由以下几种情况引起: - **内存泄漏**:对象不再使用,但未被垃圾回收机制回收,导致内存占用持续上升。 - **大量数据加载**:一次性加载大量图片、视频或数据,未进行分页或懒加载。 - **事件监听未解绑**:未及时移除不再需要的事件监听器。 - **闭包引用不当**:闭包中引用了外部作用域的变量,导致无法释放。 - **DOM节点未清除**:动态创建的DOM元素未正确移除,仍被引用。 ### 二、诊断工具与方法 #### 1. 使用 Chrome DevTools Memory 面板 Chrome 开发者工具提供了强大的内存分析功能,可以用于检测内存泄漏和分析内存使用情况。 - **堆快照(Heap Snapshot)**:用于查看当前内存中对象的分布情况,识别未被释放的对象。 - **内存分配记录(Allocation instrumentation on timeline)**:记录对象的创建过程,帮助定位持续增长的内存分配。 - **DOM节点内存占用**:检查是否存在未释放的DOM节点。 #### 2. Performance 面板监控内存使用趋势 通过 Performance 面板可以记录页面运行时的内存使用情况,观察内存增长趋势,判断是否存在内存泄漏或溢出风险。 #### 3. 内存分析工具 第三方工具如 `heapdump`、`memwatch-next` 等可用于 Node.js 环境下的内存分析,帮助生成堆快照并分析内存使用情况。 ### 三、解决内存溢出的策略 #### 1. 及时释放无用对象 确保对象在使用完毕后不再被引用,以便垃圾回收机制可以回收内存。 ```javascript let data = fetchHugeData(); // 假设这是一个大数据对象 // 使用完后设置为 null data = null; ``` #### 2. 解除事件监听器 在组件卸载或对象销毁时,务必移除所有事件监听器。 ```javascript element.addEventListener('click', handleClick); // 在适当的时候移除 element.removeEventListener('click', handleClick); ``` #### 3. 使用弱引用(WeakMap / WeakSet) 在需要引用对象但又不希望阻止其被回收时,可以使用 `WeakMap` 或 `WeakSet`。 ```javascript const weakMap = new WeakMap(); const key = {}; weakMap.set(key, 'value'); // 当 key 不再被引用时,value 也会被回收 ``` #### 4. 懒加载与分页加载 对于大量资源(如图片、数据),采用懒加载或分页加载策略,避免一次性加载过多内容。 ```javascript function lazyLoadImage(imgElement) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { imgElement.src = imgElement.dataset.src; observer.unobserve(imgElement); } }); }); observer.observe(imgElement); } ``` #### 5. 使用内存分析工具定期检测 在开发过程中,定期使用 Chrome DevTools 或其他内存分析工具检测内存使用情况,及时发现潜在问题。 ### 四、优化建议 - **避免全局变量滥用**:全局变量生命周期长,容易造成内存堆积。 - **组件卸载时清理资源**:在 React、Vue 等框架中,确保在组件卸载时清理状态和事件。 - **合理使用缓存**:缓存策略应考虑内存占用,避免无限增长。 - **减少闭包嵌套层级**:深层闭包可能导致外部变量无法释放。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值