Javascript运行机制深入
in Javascript with 0 comment

Javascript运行机制深入

in Javascript with 0 comment

这是继JavaScript运行机制的再深入一篇文章。

浏览器内核(渲染进程)

浏览器的渲染进程是多线程的!包含了哪些线程(列举一些主要常驻线程):

GUI渲染线程

JS引擎线程

事件触发线程

定时触发器线程

异步http请求线程

梳理浏览器内核中线程之间的关系

GUI渲染线程与JS引擎线程互斥:
由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。

WebWorker,JS的多线程:

从Event Loop谈JS的运行机制

alt text

看到这里,应该就可以理解了:为什么有时候setTimeout推入的事件不能准时执行?因为可能在它推入到事件列表时,主线程还不空闲,正在执行其它代码, 所以自然有误差。

事件循环机制进一步补充

alt text

事件循环进阶:macrotask与microtask

英文参考看这理

console.log('script start');

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

Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});

console.log('script end');

输出效果是:

script start
script end
promise1
promise2
setTimeout

为什么呢?因为Promise里有了一个一个新的概念:microtask

或者,进一步,JS中分为两种任务类型:macrotask和microtask,在ECMAScript中,microtask称为jobs,macrotask可称为task

它们的定义?区别?简单点可以按如下理解:

macrotask(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

microtask(又称为微任务),可以理解是在当前 task 执行结束后立即执行的任务

分别很么样的场景会形成macrotask和microtask呢?

补充:在node环境下,process.nextTick的优先级高于Promise,也就是可以简单理解为:在宏任务结束后会先执行微任务队列中的nextTickQueue部分,然后才会执行微任务中的Promise部分。

process.nextTick(function(){
    console.log(7);
});

new Promise(function(resolve){
    console.log(3);
    resolve();
    console.log(4);
}).then(function(){
    console.log(5);
});

process.nextTick(function(){
    console.log(8);
});

这段代码运行结果是3,4,7,8,5

所以,总结下运行机制:

alt text

Responses