从V8的内存管理算法出发-教你如何管理内存

@[toc]

导语

• 什么是V8？

• V8 js运行的引擎（类似 java运行在jvm上）

• 为什么要关注内存？

• 防止页面占用内存过大，引起客户端卡顿，甚至无响应。
• Node 使用的也是V8，内存对于后端服务的性能至关重要，因为服务的持久性，后端更容易造成内存溢出。
• 面试装逼神器。

一、V8引擎如何回收垃圾

1、V8的内存分配

在这里插入图片描述

（1）内存大小

内存的大小和操作系统有关，64位为1.4G，32位为0.7G。

• 64位下新生代的空间为 64MB ，老生代为 1400MB。
• 32位下新生代的空间为 16MB ，老生代为 700MB。

• 为什么只设置 1.4G ? 而不是2G、3G...
  • 1、js最初设计是在浏览器上跑的，浏览器上的js不持久，运行完代码就可以了，所以 1.4G 完全够用。
  • 2、js有垃圾回收机制，回收时会暂停所有代码的执行，(回收300MB大概需要0.5s)，如果设置为3G，那回收时间会特别长，程序停止时间过久。

（2）新生代和老生代

• 新生代(semi space From & semi space To)简单地说就是==复制==
• 老生代简单地说就是==标记删除整理==

新生代：

• 新生代存放的是 存活时间比较短的变量，会频繁发生垃圾回收。
• 新生代会标记活着的变量。首先会将 From 中活着的变量 复制到 To 中，然后将 From 清空，下一次会将 To 中活着的变量 复制到 From 中，并将 To 清空。
• 这是典型的 ==牺牲空间，获取时间== 算法
• 因为做清空是很快的，而一个一个删除然后整理是很慢的(内存是连着的，删除一个变量，就需要将后面的变量向前复制，然后删除原来的，整理很慢)

老生代：

• 老生代会标记死掉的变量，做删除、整理(碎片整理)的操作。

• 数组是需要连续的内存空间，整理很耗时间

  
  
  在这里插入图片描述

晋升机制：

• 刚开始定义的变量都是新生代，当变量在新生代经历过一次回收，就拥有资格晋升为老生代(但不会直接放入老生代)。
• 直到新生代 To(From) 空间已经使用超过 20% ，那么就会晋升到老生代空间。

2、变量处理

• 内存主要就是存储变量等数据的
• 局部变量当程序执行结束，且没有引用的时候就会死掉
• 全局对象会始终存活到程序运行结束

eg：

function f () {
    var a = ''
}
f(); // f 执行结束 a 就会被回收

function f () {
    var a = '';
    return a;
}
var b = f(); // f 执行结束 a 不会被回收，因为外层作用域还有 a 的引用 b。

---

二、如何查看V8内存使用情况

1、使用 node 来查看内存使用情况

• 通过 process.memoryUsage()
  
  在这里插入图片描述
  
  
  在这里插入图片描述
• rss： V8申请到的总占用空间
• heapTotal： 堆总内存
• heapUsed： 已使用的内存
• external： node专有（底层是c，额外申请到的c++内存 ）

2、在 chorme 浏览器中查看内存使用情况

• 通过 window.performance
  
  在这里插入图片描述

---

三、内存优化实例

1、优化内存技巧

• （1）尽量不要定义全局变量
• （2）全局变量记得销毁掉

• a = undefined
• delete a;不建议使用，严格模式下会出问题

• （3）用匿名自执行函数变全局为局部

• (function () {}())

eg：

function getme () {
  var mem = process.memoryUsage();
  var format = function (bytes) {
    return (bytes / 1024 / 1024).toFixed(2) + 'MB';
  }
  console.log('heapTotal: ' + format(mem.heapTotal) + 'heapUsed: ' + format(mem.heapUsed));
}
var size = 20 * 1024 * 1024;
var arr1 = new Array(size);
var arr2 = new Array(size);
var arr3 = new Array(size);
var arr4 = new Array(size);
var arr5 = new Array(size);
var arr6 = new Array(size);
var arr7 = new Array(size);
var arr8 = new Array(size);
var arr9 = new Array(size);
getme(); // 内存溢出 极限 8 个

在这里插入图片描述

function getme () {
  var mem = process.memoryUsage();
  var format = function (bytes) {
    return (bytes / 1024 / 1024).toFixed(2) + 'MB';
  }
  console.log('heapTotal: ' + format(mem.heapTotal) + 'heapUsed: ' + format(mem.heapUsed));
}
var size = 20 * 1024 * 1024;

function a () {
  var arr1 = new Array(size);
  var arr2 = new Array(size);
  var arr3 = new Array(size);
  var arr4 = new Array(size);
  var arr5 = new Array(size);
  var arr6 = new Array(size);
  var arr7 = new Array(size);
  var arr8 = new Array(size);
}
a();
var arr9 = new Array(size);
getme(); // 内存不会溢出

2、关于闭包和内存使用

首先重要的是：==闭包并不会影响内存==
虽然在某一版(很久远了)的 《Javascript 权威指南》中作者说过闭包会占用内存，让尽量避免闭包。因为当时 IE5 存在这个 BUG ，所以才导致这个问题。现在的V8是没有这个问题的，所以这是错误的说法。

eg：

function getme () {
  var mem = process.memoryUsage();
  var format = function (bytes) {
    return (bytes / 1024 / 1024).toFixed(2) + 'MB';
  }
  console.log('heapTotal: ' + format(mem.heapTotal) + 'heapUsed: ' + format(mem.heapUsed));
}

for (let i = 10000; i < 10100; i++) {
  setTimeout(function () {
    console.log(i);
    getme(); // 内存占用 4.x MB
  })
}

// 闭包形式
for (let i = 10000; i < 10100; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i);
      getme(); // 内存占用 4.x MB
    })
  })(i)
}

---

码字不易，觉得有帮助的小伙伴点个赞支持下~

---

在这里插入图片描述

扫描上方二维码关注我的订阅号~

觉得有帮助的小伙伴点个赞支持下~