技术干货让前端飞

事件轮询-JS作为单线程语言是如何实现异步操作

2020-02-24  本文已影响0人  全世界最酷的李大厨

太长不读版:
问:
什么是单线程?单线程和异步的关系是怎样的?
答:

再问:
JS作为单线程语言是如何实现异步操作
再答:

三问:
异步存在的问题

详细版:
为什么JS是单线程语言呢,原因是为了避免DOM渲染的冲突

  1. 浏览器需要渲染DOM
  2. JS可以修改DOM
  3. JS执行时,浏览器DOM渲染会暂停
  4. 两段JS不能同时执行
  5. HTML5中有webworker支持多线程,但不能访问DOM

而第二个问题用一个很常见的面试题目作例子:

console.log(‘1’);
setTimeout(() => {
    console.log(‘2’);
}, 0);
console.log(‘3’);

// 运行后会输出1,3,2

可以看到输出的结果并不是按照从上而下的顺序输出1,2,3。虽然JS是同步,但从输出结果来看setTimeout没有立即执行,而是等3输出之后才被执行2。而这里的setTimeout是异步代码。

我们来看事件循环是怎么实现这里的异步的:

  1. 判断JS代码是同步还是异步。同步代码进入主线程,异步代码则会进入event table。
  2. 异步任务在event table中注册函数,满足函数触发条件后会被推入event queue。
  3. 主线程一直在执行同步代码,直到主线程空闲时才会去check event queue中是否有可执行任务,有的话就放入主线程中执行。

此三步循环执行称为事件循环(event loop),也就可以解释为什么2会最后打印出来。

上一篇 下一篇

猜你喜欢

热点阅读