内存溢出分析及解决实践

如果页面卡顿、内存或者半夜内存飙升，溢出你觉得可能是分析什么原因造成的?有什么办法锁定原因并解决吗?(项目常用)

这是一个非常宽泛而又有深度的问题，涉及到很多的及解决实践页面性能优化问题，我依稀还记得当初面试被问到这个问题时是内存这么回答的：

1)先会检查是否是网络请求太多，导致数据返回较慢，溢出可以适当做一些缓存;

2)也有可能是分析某块资源的bundle太大，可以考虑拆分一下;3)然后排查一下js代码，及解决实践是内存不是某处有过多循环导致占用主线程时间过长;

4)浏览器某帧渲染的东西太多，导致的溢出卡顿;

5)在页面渲染过程中，可能有很多重复的分析重排重绘;

后来了解到了，感官上的及解决实践长时间运行页面卡顿也有可能是因为内存泄漏，内存溢出引起的内存。

一、溢出内存溢出与内存泄露

1、云南idc服务商分析内存溢出

1)一种程序运行出现的错误。

2)当程序运行所需内存超过了计算机剩余的内存时，程序崩溃并抛出内存溢出的错误。

例如：系统已经不能再分配出你所需要的空间，比如你需要100M的空间，系统只剩90M了，这就叫内存溢出。

2、内存泄漏

1)指内存被占用且没有及时释放。

2)内存泄漏越多，计算机剩余的内存就越小，此时越容易发生内存溢出。

常见的内存泄露情况：

1)意外的全局变量

2)未及时清理计时器或回调函数

3)闭包

例如：用资源的时候为他开辟了一段空间，当你用完时忘记释放资源了，这时内存还被占用着，一次没关系，但是内存泄漏次数多了就会导致内存溢出。内存泄漏是导致迟缓，崩溃的根本原因，甚至会导致其他应用问题。

二、源码库垃圾回收机制

垃圾回收机制(GC)

根据内存泄漏的定义，有些变量或数据不再被使用或不需要了，那么它就是垃圾变量或垃圾数据，如果其一直保存在内存中，最终可能会导致内存占用过多的情况。那么此时就需要对这些垃圾数据进行回收，这里引入了垃圾回收机制的概念。

1、GC定义与作用

GC 就是垃圾回收机制的简写;

GC 可以找到内存中的垃圾、并释放和回收空间;

2、GC里的垃圾是什么

1) 程序中不再需要使用对象

function func() {   name = lg   return `${ name} is a coder` } func() 

2) 程序中不再需要使用对象

function func() {    const name = lg   return `${ name} is a coder` } func() 

3、常见 GC 算法- 引用计数

引用计数算法实现原理

引用计数算法(重要)

核心思想：设置引用数，判断当前引用数是否为 0; 引用计数器; 引用关系改变时修改引用数字; 引用数字为0时立即回收; const user1 = { age: 11} const user2 = { age: 22} const user3 = { age: 33} const nameList = [user1.age, user2.age, user3.age] function fn() {   const num1 = 1;   const num2 = 2; } fn(); 

说明：fn() 的num1,num2会被回收。

4、常见 GC 算法- 标记清除

标记清除算法实现原理

核心思想：分标记和清除二个阶段完成; 遍历所有对象找标记活动对象; 遍历所有对象清除没有标记对象; 回收相应的空间; function speakLines(){    let night="天黑";//做个标记 ，进入环境    let closeEyes="闭眼";//做个标记 ，进入环境    let speak=`开始狼人杀，${ night}请${ closeEyes}`;//做个标记 ，进入环境    console.log(speak); } speakLines() //代码执行完毕  里面被标记过的变量，又被标记 离开环境 最后被回收 

三、服务器租用V8引擎- node内存溢出

用户反馈的说是半夜没人用的时候内存飙升了，node内存的溢出的问题分析。

1、先期排查(重要)

先期排查的内容，信息如下：

1) 日志：数据分析大小，内存溢出日志。

2) 监控：开启Sentry监控，Sonar代码质量，阿里云监控。

1) 报错日志

a. 数据分析

b. 报错日志

2021-05-13 22:26:48:198S: FATAL ERROR:  CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 2021-05-15 00:18:33:670S: FATAL ERROR:  Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 

2、问题分析 (重要)

1) V8引擎对Node.js(和Chrome V8)中的内存限制大小。

2) 代码分析：内存泄漏出现情况(重要)

redis服务(没有使用去掉); 无用的node安装依赖包; node的回收机制没有开启; websocket机制; socket在node里面是否销毁; node端是否存储了api返回的数据(导致内存溢出); node代理的时候是否发送给dns，或者带域名的地址(网络慢导致代理失败);

3、Nodejs内存 - 扩大容量

V8引擎对Node.js(和Chrome V8)中的内存限制大小。

原因

因为在Node中，通过JavaScript使用内存时只能使用部分内存(64位系统：1.4 GB，32位系统：0.7 GB)，这个时候，如果前端项目非常的庞大，Webpack编译时就会占用很多的系统资源，如果超出了V8引擎对Node默认的内存限制大小时，就会产生内存溢出的错误。

解决方案一：通过 package.json 中的 "build" 加大内存

"scripts": {      "dev": "node build/dev-server.js",     "start": "node build/dev-server.js",     "build": "set NODE_ENV=production && node --max_old_space_size=4096 build/build.js",     "e2e": "node test/e2e/runner.js",     "test": "npm run e2e"   }, 

解决方案二：安装插件，加大内存

第一步：在packagejson里添加这两个插件

npm install -g increase-memory-limit npm install cross-env 

第二步：在package.json里的scripts里进行配置

"scripts": {      "fix-memory-limit": "cross-env LIMIT=8192 increase-memory-limit"   }, 

LIMIT是你想分配的内存大小，这里的8192单位是M也就是8G(具体的大小根据实际情况而定);

第三步：

npm run fix-memory-limit 

*说明：增加内存限制大小，并不能够实质解决问题。

扩展知识

1、认识 V8

V8 是一款主流的 JavaScript 执行引擎 V8 采用即时编译 V8 内存设限

因为在Node中，通过JavaScript使用内存时只能使用部分内存(64位系统：1.4 GB，32位系统：0.7 GB)

2、V8 垃圾回收策略

采用分代回收的思想 内存分为新生代、老生代 针对不同对象采用不同算法

3、V8 如何回收新生代对象

V8内存分配 V8内存空间一分为二 小空间用于存储新生代对象(32M | 16M) 新生代指的是存活时间较短的对象

V8 内存分配

新生代对象回收实现

回收过程采用复制算法 + 标记整理 新生代内存区分为二个等大小空间 使用空间为 From，空闲空间为 To 活动对象存储于 From 空间 标记整理后将活动对象拷贝至 To From 与 To 交换空间完成释放

回收细节说明

拷贝过程中可能出现晋升 晋升就是将新生代对象移动至老生代 一轮 GC 还存活的新生代需要晋升 To 空间的使用率超过 25%

4、V8 如何回收老生代对象

老年代对象说明

老年代对象存放在右侧老生代区域 64位操作系统1.4G，32操作系统 700M 老年代对象就是指存活时间较长的对象

老年代对象回收实现

主要采用标记清除、标记整理、增量标记算法 首先使用标记清除完成垃圾空间的回收 采用标记整理进行空间优化 采用增量标记进行效率优化

细节对比

新生代区域垃圾回收使用空间换时间 老生代区域垃圾回收不适合复制算法

标记增量如何优化垃圾回收

四、Chrome devTools查看内存情况

监控内存的几种方式(重要)

浏览器任务管理器 Timeline 时序图记录 堆快照查找分离 DOM 判断是否存在频繁的垃圾回收

chrome内存泄露、内存泄漏分析工具

内存分析使用的工具包括chrome任务管理器、chrome时间轴(低版本是Timeline，高版本对应performance)、chrome memory(低版本是chrome profiles，主要用JS堆快照、JS堆动态分配时间轴)。

1) 使用Chrome任务管理器，了解网页使用的内存量。

2) 使用时间轴记录可视化内存使用。

3) 使用堆快照标识分离的DOM树(内存泄漏的常见原因)。

4) 通过堆动态分配时间轴记录了解在JS堆中分配及回收情况。

首先打开Chrome的无痕模式，这样做的目的是为了屏蔽掉Chrome插件对我们之后测试内存占用情况的影响。

然后打开开发者工具，找到Performance这一栏，可以看到其内部带着一些功能按钮，例如：开始录制按钮;刷新页面按钮;清空记录按钮;记录并可视化js内存、节点、事件监听器按钮;触发垃圾回收机制按钮等等。

简单录制一下百度页面，看看我们能获得什么，如下动图所示：

从上图中我们可以看到，在页面从零到加载完成这个过程中JS Heap(js堆内存)、documents(文档)、Nodes(DOM节点)、Listeners(监听器)、GPU memory(GPU内存)的最低值、最高值以及随时间的走势曲线，这也是我们主要关注的点。再来看看开发者工具中的Memory一栏，其主要是用于记录页面堆内存的具体情况以及js堆内存随加载时间线动态的分配情况

五、代码优化

代码优化介绍(重要)

JavaScript中的内存管理自动完成; 执行引擎会使用不同的 GC 算法; 算法工作的目的是为了实现内存空间良性循环; Performance 工具监测内存变化; JavaScript 是单线程机制的解释型语言;

 递归导致内存溢出 (函数执行中再次调用自己执行)

// 下面案例是“死递归”  Uncaught RangeError: Maximum call stack size exceeded “内存溢出” function fn(x) {      // console.log(x);     fn(x + 1); } fn(1);  

虽然JavaScript会自动垃圾收集，但是如果我们的代码没有及时清空一些被调用的东西，就会让变量一直处于无法回收状态。

 全局变量引起

function leaks(){        leak = xxxxxx;//leak 成为一个全局变量，不会被回收 } 

 闭包

var leaks = (function(){        var leak = xxxxxx;// 被闭包所引用，不会被回收     return function(){          console.log(leak);     } })() 

 被遗忘的计时器

var someResource = getData(); setInterval(function() {      var node = document.getElementById(Node);     if(node) {          // Do stuff with node and someResource.         node.innerHTML = JSON.stringify(someResource));     } }, 1000); 

 eval 使用

使用eval()函数会带来安全隐患，eval()函数的作用是返回任意字符串，当作js代码来处理。

原来代码：

this.formColor = eval(( + resp.responsePageData.sysColor + )); 

处理后代码：

this.formColor = JSON.parse(resp.responsePageData.sysColor); 

*总结

在项目过程中，如果遇到了某些性能问题可能跟内存泄漏有关时，就可以参照本文方法去排查，一定能找到问题所在并给到解决办法的。

虽然JavaScript的垃圾回收是自动的，但我们有时也是需要考虑要不要手动清除某些变量的内存占用的，例如你明确某个变量在一定条件下再也不需要，但是还会被外部变量引用导致内存无法得到释放时，你可以用null对该变量重新赋值就可以在后续垃圾回收阶段释放该变量的内存了。

很赞哦!（6568）