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

导语

  • 什么是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)
}

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


在这里插入图片描述

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

发布了119 篇原创文章 · 获赞 74 · 访问量 19万+

猜你喜欢

转载自blog.csdn.net/q95548854/article/details/102794130