JavaScript脚本制作的vm虚拟机

JS是单核的

JS是单核的，换句话说只有一个主线程，也是它一次也只能实行一段编码。JS中是没有进程理论的，所谓单核也仅仅相对于线程同步来讲。JS设计目的就没考虑这种，对于JS这类不具有并行任务解决的特点，也称为“单核”。

尽管JS运作用浏览器里是单核的，可是电脑浏览器是量化策略的（Event driven），电脑浏览器里很多行动是多线程（Asynchronized）的，会建立事件并放进实行序列中。电脑浏览器里很多多线程个人行为均是由电脑浏览器新开一个进程来完成，一个浏览器最少完成三个长驻进程：

• JS模块进程
• GUI3D渲染进程
• 事件触发进程

JS模块

JavaScript引擎是一个专业解决JavaScript脚本制作的vm虚拟机，一般会附加在浏览器工具当中，例如最有名的便是Chrome浏览器V8模块，如图所示，JS模块主要有两种部件组成：

• 堆-内存分配所发生的地区
• 栈-函数调用的时候会形一个个栈帧（frame）

  

执行栈

每一个函数公式实施的情况下，都是会形成一个新的execution context（执行上下文），执行上下文会含有一些现阶段函数的参数、静态变量这类的信息，它能被送入栈中， running execution context（已经实施的前后文）一直处于栈顶部。当函数公式实行完了，它执行上下文是从栈弹出来。

function bar() {
console.log('bar');
}

function foo() {
console.log('foo');
bar();
}

foo();

实施过程中栈的改变：

event loop(事件循环)

Wikipedia那样界定:

"Event Loop是一个软件结构，用以等候和发送信息人物事件。（a programming construct that waits for and dispatches events or messages in a program.）"

简单的说，便是在程序流程中加入2个进程：一个承担程序流程自身的运作，称之为"主线程"；另一个承担主线程与其它过程（通常是各种各样I/O实际操作）的通讯，被称作"Event Loop进程"（能够译成"信息进程"）。

事件循环与任务队列

事件循环可以将其形容为：

1. 函数公式入栈，当Stack中实行到异步任务时，就把他扔给WebAPIs,然后实行同歩每日任务,直至Stack为空;
2. 在这段时间WebAPIs进行这件事情，把调用函数放进CallbackQueue中等候;
3. 当执行栈为空时，Event Loop把Callback Queue中的一个每日任务放进Stack中,返回第1步。

   

• Event Loop是通过javascript寄主自然环境（像电脑浏览器）来完成的;
• WebAPIs是通过C 完成浏览器建立的进程，解决例如DOM事情、http要求、计时器等异步事件;
• JavaScript 的并发模型根据"事件循环";
• Callback Queue(Event Queue 或是 Message Queue) 任务队列,储放异步任务的调用函数

下面看一个异步函数实行的事例：

var start=new Date();
setTimeout(function cb(){
    console.log("时长间隔：",new Date()-start 'ms');
},500);
while(new Date()-start<1000){};

1. main(Script) 函数公式入栈,start自变量逐渐复位
2. setTimeout入栈,出栈,扔给WebAPIs,逐渐按时500ms;
3. while循环系统入栈,逐渐堵塞1000ms;
4. 500ms之后,WebAPIs把cb()放进任务队列,这时while循环系统仍在栈中,cb()等候;
5. 就这样过去了500ms,while循环系统执行完毕从栈中枪出,main()弹出来,这时栈为空,Event Loop,cb()进到栈,log()进栈,导出'时长间隔：1003ms',出栈,cb()出栈

宏任务(Macrotasks)的微每日任务(Microtasks)

其实大家上面提到的全是宏任务(Macrotasks)，可是js中还有一种序列微任务(Microtasks)。

macro-task(Task):一个event loop有一个或是好几个task序列。task每日任务源十分广泛，例如ajax的onload，click事情，大部分我们通常关联的各种各样事情全是task每日任务源，也有数据库操作（IndexedDB ），需注意setTimeout、setInterval、setImmediate都是task每日任务源。总的来说task每日任务源：

• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

micro-task(Job):microtask 序列和task 序列有些相似，全是先进先出法的序列，由指定每日任务源去给予每日任务，不一样的是一个 event loop中只有一个microtask 序列。此外microtask实行机会和Macrotasks也略有不同

• process.nextTick
• promises
• Object.observe
• MutationObserver

那样Macrotasks和Microtasks有什么别不同呢
举一个典型的例子，假定一个script标签的编码如下所示：

Promise.resolve().then(function promise1 () {
       console.log('promise1');
    })
setTimeout(function setTimeout1 (){
    console.log('setTimeout1')
    Promise.resolve().then(function  promise2 () {
       console.log('promise2');
    })
}, 0)

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

运作全过程：

script中的编码被列入一个task，放进task序列。

循环系统1：

• 【task序列：script ；microtask序列：】

1. 从task序列取出script每日任务，送入栈中实行。
2. promise1列入microtask，setTimeout1列入task，setTimeout2列入task。

• 【task序列：setTimeout1 setTimeout2；microtask序列：promise1】

3. script每日任务执行完毕，实行microtask checkpoint，取下microtask序列的promise1实行。

循环系统2：

*【task序列：setTimeout1 setTimeout2；microtask序列：】 4. 从task序列取出setTimeout1，送入栈中实行，将promise2列入microtask。

• 【task序列：setTimeout2；microtask序列：promise2】

5. 实行microtask checkpoint，取下microtask序列的promise2实行。

循环系统3：

• 【task序列：setTimeout2；microtask序列：】

6. 从task序列取出setTimeout2，送入栈中实行。 7.setTimeout2每日任务执行完毕，实行microtask checkpoint。

• 【task序列：；microtask序列：】

综上所述常说，每一次event loop循环系统执行栈结束后，会执行完对应的microtask每日任务

event loop里的Update the rendering（升级3D渲染）

这也是event loop中至关重要一部分，于第7步将进行Update the rendering（升级3D渲染），标准容许电脑浏览器自身决定是否更新视图。换句话说或许不是每场事件循环都要去更新视图，只能在有适当的时候才更新视图。