最近,同事之间做技术分享的时候提到了一个问题“js的异步是另开一个线程吗?”当时为此争论不休。会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教,谢谢!

  js的异步主要有三部分:定时器setTimeout/setInterval;HTTP请求;事件响应。

对于定时器setTimeout/setInterval的异步问题,高程上《高级定时器》(P609)是这样解释的:

除了主JavaScript执行进程外,还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按 钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。在接到某个Ajax响应时,回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。
定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。定时器对队列的工作方式是,当特定的时间过去后,将代码插入,注意添加到队列并不意味着它会马上执行,而只能说它会尽快执行,设定一个150ms后执行的定时器,不代表150ms后它会马上执行,它只会表示在150ms后被加入到队列中,如果这个时间点队列是空闲的,那么这段代码就会被执行;其他情况下,代码可能明显地等待更长时间才执行。

总结:

  1. Javascript引擎解析是一个单线程的过程,浏览器无论在任何时候有且只有一个线程在运行Javascript程序;

  2. 浏览器是多线程的,这些线程在内核控制下相互配合以保持同步。在处理js的异步上浏览器内核的实现可能有多个进程:Javascript引擎线程、界面渲染线程、浏览器事件触发线程、HTTP请求线程…… 补充 : 这些线程的名字为渲染引擎、网络、js解析器等 参考自 前端必读:浏览器内部工作原理
  3. Javascript除了一个主线程外,还配有一个代码队列,这个队列用以存放定时器、HTTP请求、事件响应的回调。

所以我对这个流程的理解是这样的:

  Javascript代码自上而下执行的,当执行到定时器、或者发送HTTP请求、或者发生用户交互事件响应时,会自动触发对应事件(HTTP请求、事件响应),将回调函数储存到队列中。Javascript执行完主线程代码后,会去执行任务队列,队列内这个时间点是否有代码要执行;如果有,则执行队列中的代码。

进一步理解——对队列:

  有细心的会发现,上面的理解没有加入"定时器",我对此的进一步理解: 有一个现象,Javascript里提供了console.time(name)console.timeEnd(name)可以打印出一段代码的执行时间。由此,我感觉Javascript每一段代码的执行都会有记录一个时间。Javascript会根据这个时间来安排队列.

  当代码执行到用户交互事件时,会传入回调给队列,该回调的时间就是事件触发的时间;当代码执行到定时器的时候,传入队列的回调函数的时间是定时器触发的时间加上延迟;而HTTP请求传递给队列的回调函数的时间则是其取得数据的时间(我感觉中间可能穿插了一个readyState==4时会重新传入一个时间,或者可以直接抛去时间,做if判断,判断状态是4时执行);这样可以根据时间对队列进行进一步排序,形成一个自上而下的队列!

js的异步和单线程的更多相关文章

  1. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  2. 面试 09-02.js运行机制:异步和单线程

    09-02.js运行机制:异步和单线程 #前言 面试时,关于同步和异步,可能会问以下问题: 同步和异步的区别是什么?分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的 ...

  3. JS(异步与单线程)

    JS(异步与单线程) 题目1.同步和异步的区别是什么,试举例(例子见知识点) 区别: 1.同步会阻塞代码执行,而异步不会 2.alert 是同步,setTimeout 是异步 题目2.关于 setTi ...

  4. JS三座大山再学习(三、异步和单线程)

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...

  5. JS三座大山再学习 ---- 异步和单线程

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...

  6. 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

    转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...

  7. JS的异步世界

    前言 JS的异步由来已久,各种异步概念也早早堆在开发者面前.可现实代码中,仍然充斥了各种因异步顺序处理不当的bug,或因不好好思考,或因不了解真相.今天,就特来再次好好探索一番JS的异步世界. 01 ...

  8. JavaScript异步和单线程

    一,同步和异步的区别: 同步会阻塞代码执行,而异步不会.(比如alert是同步,setTimeout是异步) 二,前端使用异步的场景: 1,定时任务:setTimeout,setInterval 2, ...

  9. JS的异步模式

    JS的异步模式:1.回调函数:2.事件监听:3.观察者模式:4.promise对象 JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous) ...

随机推荐

  1. 在本机eclipse中创建maven项目,查看linux中hadoop下的文件、在本机搭建hadoop环境

    注意 第一次建立maven项目时需要在联网情况下,因为他会自动下载一些东西,不然突然终止 需要手动删除断网前建立的文件 在eclipse里新建maven项目步骤 直接新建maven项目出了错      ...

  2. 猎鱼达人_PC按键

    更新模式[强制] 更新版本[3.13] 更新链接[https://yunfei-1256035889.cos.ap-beijing.myqcloud.com/%E6%8C%89%E9%94%AE%E7 ...

  3. flask权限控制

    大概思路为通过管理员id的查询角色,然后查看相应权限,为列表类型,然后通过id查询对应的路由规则,进而得出结论得出是否具有该权限 具体代码: def admin_auth(f): @wraps(f) ...

  4. Ubuntu14.04下如何配置固定IP

    首先用root用户登陆,然后输入你root的密码.如下图:   然后编辑interfaces文件,该文件位于/etc/network/下,执行如下命令: vim /etc/network/interf ...

  5. 19.3.5日,报关于表单验证和ui-router

    今天完成的事情: (1)学习angularJS表单验证 可以验证的内容<input type="text" minlength="2" maxlength ...

  6. 读《31天学会CRM项目开发》记录4 - WEB服务配置

    好几天没有更新记录了,因为最近都在看本书的基础内容,然后跟着练习.等看到数据库部分,就晕菜了,只能草草浏览一遍,想在后面的实战中再加强. 下面是对IIS 和ASP.NET的配置! 一.什么是IIS? ...

  7. vs中 VMDebugger未能加载导致异常

    ,纠结了许久的一个问题,终于找到了解决 vs中 VMDebugger未能加载导致异常 错误号:80004005 搜了好多,没有一个给出完美的答案.   解决办法:工具->导入和导出设置,重置一下 ...

  8. 解决微信浏览器中无法一键拨号问题tel

    公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...

  9. ionic4 开发企业微信应用0

    作为一个后台开发人员,几年前参与过Ionic1开发过一微信公众号的经历,所以这次开发企业微信应用,就使用了ionic,正好ionic4 rc版本发布,虽然不是正式版,作为本项目的项目经理,还是决定使用 ...

  10. 1.Git安装

    1.安装 首先下载安装包https://git-scm.com/downloads/ 双击安装任意盘符,双击之后一路Next,当然也可以修改默认配置 安装结束!