@[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 = undefineddelete 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)
}
码字不易，觉得有帮助的小伙伴点个赞支持下~
在这里插入图片描述
网友评论