js的实行机制

2019年8月24日 186次阅读 来源: jsdt

js在哪实行

js的实行引擎基于v8(c++编写),在chrome和node中都有运用,实行时有以下两部分组成

  • 内存堆(内存分派)
  • 挪用栈(代码实行)

上述两部分的联络就是代码在挪用栈中实行,实行历程当中会存取一些对象在内存堆上。

我们写的js代码经由js引擎(诠释器)转化为高效的机器码,如今的v8引擎由TurboFan和Ignition两部分组成,个中Ignition是诠释器,而TurboFan主要对代码做些优化,以进步实行机能。

基于实行引擎的实行道理在代码层面我们能够做些优化,能够参考我之前的一篇文章

js怎样实行

js同步实行

js依据代码递次实行,在栈上分派实行空间,依据挪用递次,会有出栈入栈等种种状况,比较好剖析,唯一值的说的处所就是js只要一个主线程,栈空间有限,假如递归实行过深会发作溢出,所以在编写代码层面须要注重这类状况。

js异步实行

为何要有异步?

同步单线程代码处置惩罚起来轻易,代码表达也轻易,更相符我们的头脑体式格局,为何还会涌现异步呢?
由于同步会发作壅塞,在如今这个高并发时期,不能很好的处置惩罚海量要求,同时也不能充分利用硬件资本(想一想cpu和io之间处置惩罚速率差别你就深有体会)。
然则为何不多线程呢,比方java,主如果单个线程上运转代码相对来多线程来说说轻易写，没必要斟酌在多线程环境中涌现的庞杂场景，比方死锁等等。

异步实行机制?

异步实行相对来说庞杂些,所以详细形貌下,关键是在种种运用状况下实行递次题目,在此就须要引入一个观点–>Event Loop。连系下面这幅图举行大抵申明下:
《js的实行机制》

    Event Loop的观点
  • 一切使命在主线程上实行，构成一个实行栈（execution context stack),上图stack地区所示。
  • 实行历程当中可能会挪用异步api,个中Background Threads担任详细异步使命实行,终了后将宏使命回调逻辑放入task queue中,微使命回调逻辑放入micro task行列中。
  • 主线程实行终了,搜检microtask行列是不是为空,会实行到行列空为止
  • 从宏使命行列中掏出一个在实行,实行完后,搜检并掏出实行microtask行列的使命,然后不停反复这个步骤,关于这全部轮回历程,一个对应的形貌名词就叫做event loop。

node中异步

异步使命分类

  • macrotask范例包含 script团体代码,setTimeout,setInterval,setImmediate,I/O……
  • microtask范例包含 Promise process.nextTick Object.observe MutaionObserver……

node中event loop各个阶段的操纵如下图所示

《js的实行机制》
申明,上图中每一个盒子示意了event loop的一个阶段,每一个阶段实行终了后,或许实行的回调数目到达上限后，event loop会进入下个阶段。

timers: 在到达这个下限时候后实行setTimeout()和setInterval()这些定时器设定的回调。
I/O callbacks: 实行除了close回调，timer的回调，和setImmediate()的回调,比方操纵系统回调tcp毛病。
idle, prepare: 仅内部运用。
poll: 猎取新的I/O事宜,比方socket的读写事宜；node会在恰当条件下壅塞在这里,假如poll阶段余暇,才会进入下一阶段。
check: 实行setImmediate()设定的回调。
close callbacks: 实行比方socket.on('close', ...)的回调。

下面连系一些详细例子举行申明


require('fs').readFile('./case1.js', () => {
    setTimeout(() => {
        console.log('setTimeout in poll phase');
    });
    setImmediate(() => {
        console.log('setImmediate in poll phase');
    });
});

输出结果是:
setImmediate in poll phase
setTimeout in poll phase
Process finished with exit code 0

申明 setImmediate的回调永久先实行,由于readFile的回调实行是在 poll 阶段，所以接下来的 check 阶段会先实行 setImmediate 的回调。

setTimeout(() => console.log('setTimeout1'), 1000);
setTimeout(() => {
    console.log('setTimeout2');
    process.nextTick(() => console.log('nextTick1'));
}, 0);
setTimeout(() => console.log('setTimeout3'), 0);

process.nextTick(() => console.log('nextTick2'));
process.nextTick(() => {
    process.nextTick(console.log.bind(console, 'nextTick3'));
});
 Promise.resolve('xxx').then(() => {
    console.log('promise');
    testPromise();
});
process.nextTick(() => console.log('nextTick4'));

结果是:

nextTick2
nextTick4
nextTick3
promise
setTimeout2
setTimeout3
nextTick1
setTimeout1

在形貌什么是event loop中,也许形貌了microtask机制,但详细到nextTick比较迥殊,有一个Tick-Task-Queue特地用于寄存process.nextTick的使命,且有挪用深度限定,上限是1000。js引擎实行 Macro Task 使命终了后,会先遍历实行Tick-Task-Queue的一切使命,紧接着再遍历 Micro Task Queue 的一切使命。详细实行逻辑能够下面代码示意。

for (macroTask of macroTaskQueue) {

    // 1. Handle current MACRO-TASK
    handleMacroTask();

    // 2. Handle all NEXT-TICK
    for (nextTick of nextTickQueue) {
        handleNextTick(nextTick);
    }

    // 3. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}

所以才会先输出process.nextTick然后才会是promise,别的的输出递次不在赘述,前面讲event-loop机制时已申清楚明了。依据上面代码表述的实行逻辑,很显然能够获得下面的个结论,当递归挪用时会发作死轮回,而宏使命就不会。

testPromise();
function testPromise() {
    promise = Promise.resolve('xxx').then(() => {
        console.log('promise');
        testPromise();
    });
}
//将之前步骤的promise使命换成这个,setTimeout2以及以后的输出永久没时机出来,类比到nextTick也是这类结果

看了一些书,参考了许多材料,将本身进修的东西,明白后在输出,愿望人人辩证的对待,有空的话接下来研究一下源码,毕竟经由过程demo考证结论的说服力没有源码来的那末直接。

参考链接
https://jakearchibald.com/201…
https://blog.sessionstack.com…
https://cnodejs.org/topic/592…
https://developer.mozilla.org…
https://nodejs.org/en/docs/gu…

    原文作者：jsdt
    原文地址: https://segmentfault.com/a/1190000012919761
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞