先来看一个例子：
setTimeOut(()=>{
console.log('set1');
});
new Promise((resolve,reject)=>{
console.log('p1')
resolve();
}).then(()=>{
console.log('then1');
})
console.log('1');
问：执行顺序？
答案：p1 --> 1 --> then1 --> set1 ;
new Promise() 的时候是同步执行。
微任务：
Promise,process.nextTick
宏任务：
整体的Scirpt代码，setTimeOut , setInterval
看看如下例子：
image.png
答案：pr1 ---> 2 ---> then1 ---> set1 --->then2 ---> then 4 ---> set2
解析过程：
确保微任务执行完了才去执行宏任务。
一 、js执行机制
image.png
另一个例子：
问：下面的代码执行会出现什么样的结果？
var b = [];
for(var i=0;i<15;i++){
b.push(new Array(20*1024*1024));
}
结果，js内存不够了，V8引擎的内存溢出，崩溃了。
image.png
so，V8引擎内存有多大？
image.png
image.png
疑问：为什么64位的系统就只设置1.4G？设计的这么小？
原因：js回收的时候会中断执行。js回收100MB内存，则需要3ms。所以不能设计太大，因为会整个中断掉。
疑问：为什么1.4GB 是比较合适的？
原因：js的设计是为了跑前端脚本的，不是持续的，执行完了就没了。而不像后端，持续执行的，所以后端要大一些
，所以前端1.4GB是比较合适的。而且是足够了。
概念解释：
新生代：新变量存放的地方
老生代：没有被回收的老变量存放的地方
如果新生代要进行复制更改的话，就会被放到老生代里面去。算法：如果新生代的内存占用整个空间的25%的时候就会进行一次复制；
那么是如何进行复制的？
新生代有两个空间，当from空间大于25%的时候，会把from空间的活着的变量标记，并且复制到新生代To空间去。然后清空from空间。当To空间大于25%的时候，在此标记活着的变量，复制到from空间去。清空To。
啥时候新生代的变量会去老生代？
当新生代的空间大于25%，并且还活着的变量，复制过后，就去老生代空间。
二、内存如何回收？
image.png
当一个变量 既不是全局，也不是局部且失去引用的时候，就会被回收。
如何查看内存
浏览器：window.performance
Node:process.memoryUsage();
image.png
Node 查看内存：
打开终端（前提是你安装了node）：
输入 node 进入node环境
oricess.memoryUsage()
会显示如下：
{
rss:21258240,//总申请到的内存
heapTotal:5656576,//总堆内存
heapUsed:3051464,//已经使用的内存
external:1401021//Node 和 js 不同的这个。因为node的源码是C++写的，可以支配一些内存给C++，所以会有一些额外的内存来给C++使用。
}
接下来我们做个小测试：
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 a =[];
var size = 20*1024*1024;
function b(){
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);
}
b();
getme();
setInterval(()=>{
a.push(new Array(20*1024*1024));
getme();
},1000);
每一秒钟执行一次；我们看下执行结果：
image.png
image.png
直到最后就崩了。。
梳理下：
最开始的时候有800多M，因为我们定义了5个局部变量并且没被回收。当到达1400的时候，发现要回收，回收了上面5个数组，当我们到最后，再去回收，发现全局只有一个a变量，无法被回收，所以最后崩溃了。
//5个全局变量 如下：
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);
三、容易引发内存使用不当的操作
image.png
1、反面教材1（滥用全局变量）：
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);
var arr10 = new Array(size);
var arr11 = new Array(size);
var arr12 = new Array(size);
var arr13 = new Array(size);
var arr14 = new Array(size);
var arr15 = new Array(size);
然后运行，直接报错，内存溢出。
如何正确的使用全局变量？
var size = 20*1024*1024;
var arr1 = new Array(size);
//使用完后释放
arr1 = undifined; //释放内存
额外小知识：
undifined 和 null 的区别:
null 是个关键字
undifined 是一个变量，和我们平时定义的 var a,bc 一样
image.png
我们测试如下代码：
var size = 20*1024*1024;
var arr1 = new Array(size);
arr1 = undifined;
var arr2 = new Array(size);
arr2 = undifined;
var arr3 = new Array(size);
arr3 = undifined;
var arr4 = new Array(size);
arr4 = undifined;
var arr5 = new Array(size);
arr5 = undifined;
var arr6 = new Array(size);
arr6 = undifined;
var arr7 = new Array(size);
arr7 = undifined;
var arr8 = new Array(size);
var arr9 = new Array(size);
var arr10 = new Array(size);
var arr11 = new Array(size);
var arr12 = new Array(size);
var arr13 = new Array(size);
var arr14 = new Array(size);
var arr15 = new Array(size);
运行后正常没有报错：
image.png
所以，尽量不要定义全局变量，如果一定要定义，那么定义完了，请释放。
2、反面教材2（缓存不限制）：
缓存一定是全局的，如果不限制，早晚都会崩溃的。尤其是服务端，缓存一定要设置大小。
比较好的处理方式，给缓存加锁。
var b = [];
for(var i=0;i<15;i++){
b.push(new Array(20*1024*1024));
}
运行后是崩溃的
image.png
改成如下：
var b = [];
for(var i=0;i<15;i++){
if(b.length > 4){
a.shift();
}
b.push(new Array(20*1024*1024));
}
运行后正常，避免无限制的缓存造成内存崩溃。
缓存是你优化的好帮手，如果你一定要用的话，请在缓存上加一个锁。
3、反面教材3（操作大文件）：
前端上传大文件，如果不处理 会直接卡死，
解决办法：切片上传；
使用node读取大文件的时候，如果是你使用
fs.readFile();
将会一次性将大文件读取到内存中，文件较大会发生卡顿或者崩溃。
4、扩展知识点，老生代的回收算法：
新生代算法，标记活的复制到另一个空间去，牺牲空间，换取时间。
老生代则不可能，因为有1.4G，老生代则是，标记-删除-整理的操作。
新生代：标记活着的变量
老生代：标记死亡变量，当内存大了，删除死亡的变量。整理，
[ ,1002,, 100]//如果不整理，数组这样的就不会是连续的了，如果不经常整理，数组就没办法继续添加了。数组必须是连续的。通过整理变成[ 1002,100，,]，连续的数组。
5、扩展额外的例子：
var a ={n:1};
var b=a;
a.x = a = {n:2};
console.log(a);
console.log(b);
问：a,b分别是什么值？
答案：
image.png
解析：
对象是引用类型的--> 所有的对象复制其实是给了这个对象的引用地址；
假设 {n:2} 的地址是 1002，{n:1} 的地址 1000
当var b = a 的时候，a,b的地址都是1000；
当a.x=a={n:2}的时候，先会执行a.x = a ，这时候x的地址是1000，即为a.x = {n:1,x:1000的地址};
a又等于{a:2}，所以a的地址变成了1002;
所以打出来的 a = {a:2}, b={n:1,x:{n:2}};
关注我，学习更多前端原理
网友评论