共计 1145 个字符,预计需要花费 3 分钟才能阅读完成。
前言
先看一段代码
setTimeout(function() {
console.log(‘timeout’);
}, 0);
new Promise((resolve, reject) => {
console.log(‘promise’);
resolve();
}).then(function() {
console.log(‘then’);
});
console.log(‘global’);
输出:promise、global、then、timeout
macrotasks 和 microtasks
在 V8 实现中包含两种任务:
macrotasks
script ,setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks
process.nextTick, Promises, Object.observe, MutationObserver
执行过程如下:
JavaScript 引擎首先从 macrotask queue 中取出第一个任务,
执行完毕后,将 microtask queue 中的所有任务取出,按顺序全部执行;
浏览器进行渲染视图然后再从 macrotask queue 中取下一个,
执行完毕后,再次将 microtask queue 中的全部取出;
循环往复,直到两个 queue 中的任务都取完。
注意:
从上面可以看到,microtask 会执行完毕才进行渲染,如果 microtask 执行时间教长,会导致卡顿
上面执行过程只是 chrome 的,safri 又不太一样
执行过程的示例:https://jakearchibald.com/201…
如何模拟 Promise.then
new MutationObserver(function() {
console.log(‘mutate’);
}).observe(document.body, {
attributes: true
});
document.body.setAttribute(‘data-random’, Math.random());
setTimeout(function() {
console.log(‘timeout’);
}, 0);
new Promise((resolve, reject) => {
console.log(‘promise’);
resolve();
}).then(function() {
console.log(‘then’);
});
console.log(‘global’);
输出:promise、global、mutate、then、timeout
参考文章:
microTask: https://github.com/kaerus-com…
es-promise : https://github.com/stefanpenn…