JavaScript引擎属于单线程作业,意味着:在同一时间只能执行一个代码块,这些代码块的执行就阻塞了异步事件的处理。

因此,出现了"任务队列"(task queue),我们可以将任务分为两种:一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
     同步任务:
在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
    异步任务:
不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。如回调函数就是异步任务
    
具体来说,异步执行的运行机制如下。
     
 (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
      (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
      (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
      (4)主线程不断重复上面的第三步。
     只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会不断重复。

简单来说,事件队列中的任务执行的条件为:

                   1.主线程已经空闲 (同步任务已经执行完毕)
                   2.任务满足触发条件,如:
                       (1) 定是函数(延时时间已经达到)
                      (2)事件函数 (特定事件被触发)
                       (3)ajax的回调函数(服务器端有数据响应)
            

下面用一个简单的例子来解释一下JavaScript处理任务处理的机制:

执行结果:

可见,定时器的回调函数是在js代码执行完成后,并满足了设置的时间条件,再执行的。

JavaScript异步的底层原理的更多相关文章

  1. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  2. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  3. javascript引擎工作原理

    1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...

  4. JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  5. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. JavaScript的闭包原理

    什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 个人的理解是 ...

  7. Js(javaScript)的闭包原理

    问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  小编 ...

  8. Neo4j图数据库简介和底层原理

    现实中很多数据都是用图来表达的,比如社交网络中人与人的关系.地图数据.或是基因信息等等.RDBMS并不适合表达这类数据,而且由于海量数据的存在,让其显得捉襟见肘.NoSQL数据库的兴起,很好地解决了海 ...

  9. JavaScript模板引擎原理

    JavaScript模板引擎原理,几行代码的事儿 2013-12-03 16:35 by BarretLee, 650 阅读, 6 评论, 收藏, 编辑 一.前言 什么是模板引擎,说的简单点,就是一个 ...

随机推荐

  1. Android使用命令行操作数据库

    所有的应用程序本地文件都存放在/data/data/目录下 C:\Users\nicole>adb shell * daemon not running. starting it now on ...

  2. 「JOISC 2016 Day 3」回转寿司

    https://loj.ac/problem/2736 题解 挺有意思的题. 考虑这种操作不好直接维护,还有时限比较长,所以考虑分块. 考虑一个操作对整个块的影响,无非就是可能把最大的拿走,再把新的元 ...

  3. AT2371 Placing Squares

    题解 考虑\(dp\) \[ dp[i]=\sum_{i=0}^{i-1}dp[j]*(i-j)^2 \] 我们可以设\((i-j)\)为\(x\),那么随着\(i\)向右移动一格,每个\(x\)都是 ...

  4. sql server 高版本数据还原到低版本sql server的注意事项

    生成的sql脚本不能大于100m,否则会报错(System.OutOfMemory) 所以要将较大的sql脚本文件进行分割

  5. [CSP-S模拟测试]:e(树上主席树)

    题目传送门(内部题66) 输入格式 第一行,一个正整数$n$,一个自然数$q$,一个整数$type$.第二行,$n$个正整数,代表$a_i$.接下来$n-1$行,每行两个正整数$u$.$v$,代表树中 ...

  6. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  7. 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

  8. 北风设计模式课程---访问者(Visitor)模式

    北风设计模式课程---访问者(Visitor)模式 一.总结 一句话总结: 设计模式是日常问题的经验总结方案,所以学好设计模式对日常出现的问题可以有很好的解决. 访问者设计模式有点神似 抽象工厂模式, ...

  9. 【洛谷P1219 八皇后】

    参考思路见白书(一本通) 题目链接 题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上 ...

  10. 三十三、python中configparser配置文件相关操作

    配置文件ini [a1]age = 18sex = 'man' [a2]age = 19sex = 'woman'name = False 1.对配置文件进行操作 import configparse ...