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. 前端面试题常考&必考之--清除浮动的方法

    浮动 问题:子元素设置了float后,脱离父元素,导致父元素无法撑开?(也就是子元素的高度没有过渡到父元素) 例子: 检查元素的效果: (三种)常用的解决办法: 1>额外标签法,添加一个空的di ...

  2. window7下docker toolbox 启用数据卷报错: Error response from daemon: invalid mode:

    场景:希望把d:\dockerShare文件夹作为数据卷 ,和docker中的centos镜像生成的容器关联. 原来的命令: docker run -d -it --name=edc-centos7 ...

  3. 如何生成各种mif文件,绝对经典!!!

    mif文件生成模板,只需要5步,很简单!!!!! 先说明如何操作,1-2-3-4-5步,后面附上模板!!! 下面以汉字去模演示过程: 1.取模软件设置:注意这里是设置的输出数据的格式!!!!!!!!! ...

  4. CF F. Royal Questions kruskal

    每一个 $A$ 必须和指定的唯一的 $B$ 匹配,转化成图论关系就是 $A$ 和 $B$ 之间有若干条连边,每个边有一个边权,而该边权只能代表一对 $A,B$. 这其实就是一个基环树的结构. 所以只需 ...

  5. HDU-6703 array

    Description You are given an array a1,a2,...,an(∀i∈[1,n],1≤ai≤n). Initially, each element of the arr ...

  6. [CSP-S模拟测试]:礼物(数学)

    题目传送门(内部题80) 输入格式 第一行输入一个正整数$n$. 第二行到第$n+1$行每行两个正整数$a_i$和$b_i$表示第$i$个礼物中包含$a_i$个红宝石和$b_i$个绿宝石. 输出格式 ...

  7. Kaggle 房价预测问题参考资料

    作者的 Kaggle 主页:https://www.kaggle.com/pavansanagapati Tutorial - Housing Prices Model Prediction http ...

  8. oralce创建dblink

    CREATE DATABASE LINK dblinkName CONNECT TO dbLoginName IDENTIFIED BY dbLoginPwd USING '(DESCRIPTION= ...

  9. HDU 5073 Galaxy (数学)

    Galaxy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Su ...

  10. qbzt day4 下午

    有向图的强连通分量 强联通:两个点之间可以互相到达 如果某个图任意两个点都是强联通的,那么称这个图强联通 如果一个图的子图是强联通的,那么称这个图是强联通子图 一个图的极大强联通子图被称作强连通分量 ...