# JS运行机制及Event Loop

了解js执行顺序及机制,更好的理解js特性,理顺代码中的一些异步操作 🚀

  • JavaScript是单线程的语言
  • Event Loop是javascript的执行机制
  • synchronous:同步任务、asynchronous:异步任务、task queue/callback queue:任务队列、execution context stack:执行栈、heap:堆、stack:栈、macro-task:宏任务、micro-task:微任务

背景

JS 从诞生起就是一门单线程的语言。至于为什么是单线程,是因为作者认为 JS 是在浏览器执行的脚本语言,对它的要求不是很高,早期的网页对 JS 需求没那么高,都是轻量级的。而且写起来一定要简单,而多线程逻辑会造成交互、DOM 操作复杂。

单线程问题,任务执行阻塞,具现到页面上:ajax数据请求,http延迟,等待完成,其他操作无法执行,页面长时间无法接受反应。像页面操作(点击)的代码就无法立即执行,只是 WebAPIs 把 callback 放到任务队列里而已,用户就会认为页面卡住了,操作无反应了。

另外,UI 渲染和 JS 执行是互斥的。虽然两者属于不同的线程,但是由于 JS 执行结果可能会对页面产生影响,所以浏览器对此做了处理,大部分情况下 JS 线程执行,render 线程就会暂停,当 JS 的同步代码执行完再去渲染。

所以 JS 用异步任务 (asynchronous callback)去解决这个问题。

阻塞、异步

fetch('url'); //假设是同步 fetch,阻塞代码执行。

render(); // 阻塞情况下无法执行

上面提到的这种执行模式算是阻塞执行,也就是在任务返回结果之前,JS 引擎线程 pending 了,导致后面的任务阻塞
对于浏览器这种实时性、交互性要求高的场景,肯定是不允许的。所以首先要非阻塞调用。非阻塞调用就是浏览器发送的这个请求任务,不需要等待结果就立即返回,但是具体数据回没回来,就需要 JS 线程不定时的查看了。而更好的做法是,这个请求任务完成后(得到数据),通知我们,让我们去获取数据。这就需要用到异步 I/O 的模式。主线程执行遇到异步任务(请求),不需要等待结果返回,只需要代码块执行完毕,即去运行其他的任务。当异步任务完成后,会以某种方式“通知”主线程,假如主线程处于闲置,就会接收异步任务的结果,亦或是没有结果。在 JS 中,异步任务执行完都是以 callback 的形式,返回给主线程结果的。所以,JS 是这种异步非阻塞的方式,去满足页面实时交互的需求,避免“页面”假死的。

浏览器小补充

现代浏览器一个 tab 的线程包括不局限于:

  • GUI 渲染线程
  • JS引擎线程
  • 事件触发线程
  • 定时器触发线程
  • 异步http请求线程

JS 中的异步操作是通过 WebAPIs 去支持的,常见的有 XMLHttpRequestsetTimeout,事件回调(onclik, onscroll等)。而这几个 API 浏览器都提供了单独的线程去运行,所以才会有地方去做定时器的计时,request 的回调。

即当代码中出现这几个定义的异步任务,是浏览器提供能力去满足需求,是不跟 JS 引擎同属一个线程的,是浏览器实现了它们跟 JS 引擎的通信

任务队列

上面提到了异步任务完成后,会通知主线程,以 callback 的方式获取结果或者执行回调。但是如果当前的主线程是忙碌的,异步任务的信号无法接收到怎么办呢?
所以还需要一个地方保存这些 callback,也就是任务队列(task queue)

🔥描述:就是主线程运行产生堆、栈,执行栈遇到异步任务(浏览器通常是调用 WebAPIs),不会等待,而是继续执行往下执行。而异步任务就会以各种方式,把 callback 加入任务队列中。待当前执行栈执行完毕,也就是出栈完毕,主线程就会从任务队列里读取第一个 callback,执行。同样的生成执行栈,结束后主线程如果发现任务队列中还有 callback,则会继续取出执行,如此重复操作。而这种循环的机制,就称之为事件循环(Event Loop)

image

Event Loop

一种确保了这些异步任务的有序执行的机制

  • heap(堆)是用户主动请求而划分出来的内存区域,比如你new Object(),就是将一个对象存入堆中,可以理解为heap存对象。
  • stack(栈)是由于函数运行而临时占用的内存区域,函数都存放在栈里。
setTimeout(() => {
  console.log(1);
}, 1000);

setTimeout(() => {
  console.log(2);
}, 0); // 先进 task queue,等待前一个任务执行完成(单线程),立即执行,不需要读秒后再放入event queue

console.log(3);

for (let i = 0; i < 10000; i++) {
  console.log(1);
}

setTimeout(() => {
  console.log(4);
}, 100); // 最后放入task queue
// 3, 10000 * 1, 2, 1, 4

有时delay时间并不准确

setTimeout(() => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
  }, 99);
}, 100);

setTimeout(() => {
  console.log(3);
}, 200);

console.log(4);

结果就不确定了,取决于同步代码的计算时间,所以定时器这个东西还是比较坑的,delay 并不准确,取决于你的 JS 线程是否闲置以及执行效率。

宏任务/微任务

⌛js异步有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入eventqueue,然后在执行微任务,将微任务放入eventqueue最骚的是,这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数,然后再从宏任务的queue上拿宏任务的回掉函数🔥

  • 宏任务一般是:包括整体代码script,setTimeout,setInterval、setImmediate。
  • 微任务:原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver记住就行了。
// 1. 加入 tasks 队列
setTimeout(()=>{
  // 7. 首次 eventloop 结束,从 tasks 中取出 setTimeout callback,执行。
  console.log('timer');
  // 8. 加入 microtask 中
  Promise.resolve().then(function() {
    console.log('promise1')
  })
  // 9. task 执行完,清空 micro 队列,输出 'promise1'
}, 0);

// 2. 加入 microtask 队列
Promise.resolve().then(function() {// 5. 第一个 microtask 任务
  console.log('promise2');
  // 6. 把 promise3 加入 micro 队列,发现队列不为空,执行输出 'promise3'
  Promise.resolve().then(function() {
    console.log('promise3');
  })
})

// 3. 执行,输出 'script'
console.log('script');
// 4. 第一个 eventloop task 阶段完毕, 开始执行 microtask queue

// result: script, promise2, promise3, timer, promise1
Promise.resolve().then(()=>{
  console.log('Promise1')  // 3、先执行微任务,清空micro-task
  setTimeout(()=>{ // 4、宏任务 callback 放入 event queue
    console.log('setTimeout2') // 9执行
  },0)
})

setTimeout(()=>{ // 2 宏任务 callback 放入 event queue
  console.log('setTimeout1') // 5、执行callback
  new Promise((resolve) => {
    console.log('promise start'); // 6、执行同步任务
    resolve();
  }).then(()=>{// 7、微任务
    console.log('Promise2') ///8、执行微任务
  })
},0)

console.log('start'); // 1、同步任务

Node

Node环境下异步执行顺序与浏览器下js执行顺序不完全一致

node新加了一个微任务(process.nextTick)和一个宏任务(setImmediate)

简单的来说,就是node在处理一个执行队列的时候不管怎样都会先执行完当前队列,然后再清空微任务队列,再去执行下一个队列

console.log('start');
setTimeout(function() {
  console.log(2);
  new Promise((resolve) => {
    console.log('promise');
    resolve();
  }).then(() => {
    console.log('promise then');
  })
});

setTimeout(() => {
  console.log(3);
})

console.log('end');

// node: start, end, 2, promise, 3, promise then
// 浏览器js: start, end, 2, promise, promise then, 3

🔥 微任务中process.nextTick比promise.then快

面试

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

// 1,7,6,8,2,4,3,5,9,11,10,12
// node环境下的事件监听依赖libuv驱动I/O库与前端环境不完全相同,输出顺序可能会有误差

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 144,481评论 1 305
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,908评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,710评论 0 214
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,372评论 0 183
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,216评论 1 262
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,949评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,558评论 2 275
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,308评论 0 168
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,183评论 7 237
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,675评论 0 214
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,416评论 2 217
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,757评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,314评论 1 33
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,215评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,682评论 3 214
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,665评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,091评论 0 170
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,687评论 2 233
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,830评论 2 237

推荐阅读更多精彩内容