JS的Event Loop

JavaScript是单线程的，只有一个执行栈，一次只能做一件事。

在浏览器中，却“好像”可以同时做几件事：点击，发送请求，执行多个函数，解析代码。

这是因为浏览器实现的Event Loop机制。

Web API

setTimeout，ajax，dom操作回调，等等都是浏览器(JS runtime)提供的。setTimeout or http or DOM 这些东西在V8引擎代码中都是找不到的，他们都是浏览器自身部署的

这些操作不占用js线程，只有在回调函数需要执行时，才会将函数推入js执行栈。

Event Loop

在浏览器DOM环境中，至少有一个event loop，“相同域名”的DOM环境至多有一个event loop。

 一个event loop可以有多个task queue，task queue包含多个任务。

 event loop会依次执行队列中的task。

优先执行macrotask queue的task，若某个task执行完成，会先执行microtask queue的task。

整个脚本文件本身是一个macrotask，在macrotask队列中。

名词解释

JS runtime

不仅包括js引擎，不同runtime还提供不同的功能。

比如，浏览器提供dom，ajax请求；node.js runtime提供file system,http服务等。

JavaScript Engine JS引擎

解释或者执行JS代码。

Call Stack 执行栈

执行栈

Call frame 

调用帧

macrotask queue

这些会产生macrotask，会被push进到macrotask queue

setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

microtask queue

这些会产生microtask，会被push进到microtask queue

process.nextTick, Promises, Object.observe, MutationObserver

 

 

[参考资料]

强烈推荐这个视频，讲的很清楚 https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://www.w3.org/TR/html5/webappapis.html#event-loops

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

https://stackoverflow.com/a/25933985/7362450

https://www.zhihu.com/question/36972010/answer/71338002

https://github.com/ccforward/cc/issues/48