JS垃圾回收

一、什么是垃圾

1、没有被引用的，一般都是垃圾；但是有个特例，比如有三个对象互相引用，形成了一个环，但它们还是垃圾；
2、所有的全局变量都不是垃圾，因为你随时有可能会用到它；
3、局部变量有生命周期，当退出这个函数后，这个局部变量就成了垃圾；它会在每次函数执行的时候再重新声明；

二、浏览器是怎么找到这些垃圾并清除它们的？

具体方法可参考：这里
1、标记清除法
简单来说，就是从全局变量开始，一层一层往下标记，把所有引用到的对象都标记起来，没有标记的清除掉；
2、引用计数法
记录每个对象被引用的次数，每次新建对象，赋值引用的时候加1，删除引用减1，一旦为0就直接回收掉；

事件循环

一、浏览器上的事件循环

参考文章
1、在浏览器上，JS是单线程的，也就是说同一时间只能做一件事，但是代码中有同步代码和异步代码，所以就有了任务队列，任务队列就是来处理异步代码的；
2、当主线程任务为空时，就会从任务队列中取出任务压入主线程来执行；
3、任务队列中的任务又分为宏任务（其实浏览器中没有宏任务一说，就应该叫任务，宏任务是Node.js发明的）和微任务；
4、宏任务有script片段，setTimeout，setInterval；
5、微任务有promise.then、window.queueMicrotask、MutationObserver（vue中的$nextTick就是利用它写的）；
6、执行顺序就是微任务会在宏任务间隙执行；

简单总结一下执行的顺序：
执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，进行一次渲染，再回到宏任务中进行下一轮循环。

new Promise(fn).then(success) 期中 fn 是立即执行的，success 会被放入 Mi 任务；

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

let promise = new Promise((resolve, reject)=>{
    console.log(1)
    resolve()
})
promise.then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

执行结果：

script start
1
promise1
promise2
setTimeout

Promise与微任务

文章
①对于处于pending状态的Promise对象p，内部状态resolve时，会让p.then(fn)里的fn加入到微任务队列；
②对于处于fulfil状态的Promise对象p，p.then(fn)里的fn会立即加入到微任务队列；

async/await转换Promise

参考文章

async function x(){
  let c = 0
  let b = new Promise(r => {
    setTimeout(()=>{
      let n = 1
      r(n)
    }, 0)
  })
  console.log(c, 'c1')  
//   await b.then(s => {
//     c = s
//   })
  // 下面这一句与上面三局一个意思
   c = await b
   console.log(c, 'c')
   return c
}

let w = x()
console.log(w, 'www')

image.png

说一下x()为什么会返回一个pending状态的Promise，因为async在函数内部会等await，然后拿到返回的数据，但是在外部是不会等的，它会直接返回一个pending状态的Promise，因为w是同步代码，所以它会在await前执行；

二、nodejs环境下的事件循环

nodejs要处理很多事件，包括I/O事件，文件事件，网络事件，它就会把这些事件分类，分成六类，按照1到6的顺序不停地轮询这些事件，轮询到哪些事件就执行哪些事件，那这个过程就叫做事件循环（Event Loop）；不过主要的还是下面3个阶段：
①timer阶段，只要处理setTimeout
②poll轮询阶段，停留时间最长，可以随时离开；
a. 主要用来处理I/O事件，该阶段中Node会不停询问操作系统有没有文件数据，网络数据等；
b. 如果Node发现有timer快到事件了或者有setImmediate任务了，就会主动离开poll阶段（去执行timer时，也必须从下循环出发，不能向上直接去timer阶段！！！）
③check阶段，主要处理setImmediate任务

process.nextTick

1、process.nextTick(fn) 的 fn 会在什么时候执行呢？

在 Node.js 11 之前，会在每个阶段的末尾集中执行（俗称队尾执行）。
在 Node.js 11之后，会在每个阶段的任务间隙执行（俗称插队执行，也是为了和浏览器执行顺序保持一致）
下面代码结果，Node.js 11 版本之前是“1 2 3 4 next”；Node.js 11 版本之后是“1 2 next 3 4”；

setTimeout(()=> console.log('1'))
setTimeout(()=> {
  console.log('2')
  //Promise.resolve().then(()=> console.log('next'))  注释的这两句与process.nextTick这一句是一样的意思，不过这两句是在浏览器中的形式
  //window.queueMicrotask(()=>console.log('next') )
   process.nextTick(()=> console.log('next'))
})
setTimeout(()=> console.log('3'))
setTimeout(()=> console.log('4'))

2、process.nextTick只存在node环境下，在浏览器上不能使用，不过浏览器上可以用window.queueMicrotask(fn)来代替它；
process.nextTick(fn)相当于Promise.resolve().then(fn)

3、Promise和async / await 都可转成process.nextTick来看

async function async1(){
    console.log('1')         
    await  async2()
    console.log('2')
}

上面的async / await完全可以转成Promise的写法；

function async1(){
    console.log('1') 
     async2().then(()=> console.log('2'))       
}

JS垃圾回收及eventloop