美文网首页技术干货让前端飞
事件轮询-JS作为单线程语言是如何实现异步操作

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

作者: 全世界最酷的李大厨 | 来源:发表于2020-02-24 16:06 被阅读0次

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

  • 单线程只有一个线程,同一时间只能做一件事情,而异步就是一种解决方案。

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

  • 通过事件循环(event loop)实现异步

三问:
异步存在的问题

  • 可读性差,没有按照代码书写顺序执行
  • callback回调函数中不容易模块化

详细版:
为什么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会最后打印出来。

相关文章

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

    太长不读版:问:什么是单线程?单线程和异步的关系是怎样的?答: 单线程只有一个线程,同一时间只能做一件事情,而异步...

  • 回调函数

    浏览器的事件轮询 首先js是单线程的,js异步是浏览器事件轮询的结果。事件轮询的字面意思就是事件循环。事件轮询的步...

  • js event loop、promise、async/awai

    event loop 事件循环/事件轮询 首先,js是单线程运行的,异步要基于回调来实现。event loop就是...

  • 16.3 JavaScript的执行机制

    浏览器事件轮询机制 js执行为单线程 网络请求、setTimeout、addEventListener属于异步事件...

  • JS浏览器事件循环和任务队列

    JS的异步机制由事件循环和任务队列构成。JS本身是单线程语言,所谓异步依赖于浏览器或者操作系统等完成。JavaSc...

  • Javascript异步机制

    Javascript作为一种单线程语言,是如何实现异步编程的呢? 相信不少人对Javascript单线程表示怀疑:...

  • js 异步全览

    问题! JS 为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? promise 的优点是什么? ...

  • javascript 执行上下文

    javascript 是单线程语言 javascript 是异步执行的,通过事件循环的方式进行 js引擎执行过程分...

  • js的单线程和异步

    js的单线程和异步 js是一直是单线程的,浏览器才是实现异步的那个家伙

  • JS执行机制

    首先我们来看几个问题: 1.JS是单线程的么?2.JS有异步么?3.JS单线程怎么实现的的异步 1.JS是单线程的...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/slgvqhtx.html