首先大家都知道javascript是单线程语言。

什么是单线程呢?比如我们去车站买票,只有一个售票窗口,大家排队买票,需要前面的人买完票,后面的人才能买票。

那为什么javascript不能是多线程呢?

这主要和它的用途有关。假如javascript可以多线程,例如操作DOM元素,一个线程往DOM里面添加内容,另一个线程则删除内容,那这时浏览器应该用哪个线程呢?

任务队列

从上面的例子中可以知道,单线程是有一个队列的,并且是有顺序的执行(按顺序买票)。

我们在考虑一个问题。假如第一个买票的人遇到一些问题,那后面的人不是得一直等着?

回到javascript中,我们优秀的设计者当然能想到这个问题。于是就出现了“同步任务”和“异步任务”,简单点来说,同步是阻塞模式,而异步是非阻塞模式。

javascript代码执行时,会有一个主线程,主线程会将同步任务一个一个往下执行,

当遇到异步任务时,会将异步任务放入任务队列。

当主线程把代码执行完之后,在从任务队列中取出一个任务放入主线程中执行。

  1. console.log("1");
  2. setTimeout(()=>{
  3. console.log("2");
  4. })
  5. console.log("3");

我们看一下上面这段代码的执行顺序:

第一步:首先会输出 1

第二步:当执行到setTimeout时,它会被放到任务队列中,因为它是异步的。

第三步:输出 3

第四步:主线程已执行完毕,主线程将setTimeout从任务队列中取出执行,输出 3

宏任务与微任务

任务队列又分宏任务和微任务。

宏任务:整体代码script,setTimeout,setInterval等。

微任务:Promise,process.nextTick等。

即然有分类,那它俩肯定是有区别的,微任务优先于宏任务执行。

  1. setTimeout(()=>{
  2. console.log("定时器执行了");
  3. })
  4.  
  5. new Promise((resolve)=>{
  6. for(var i = 0;i<100;i++){
  7. i==20&&resolve()
  8. }
  9. }).then(()=>{
  10. console.log("then函数执行了");
  11. })
  12.  
  13. console.log("程序结束");

浏览器输出结果如下

setTimeout和then都属于异步,按理说应该是setTimeout先执行的呀,但为什么then先执行了?

其实上面已经解释过了,因为Promise属于微任务,而setTimeout属于宏任务,所以then先执行。

如果还不理解,我们看下面这个例子。

  1. setTimeout(()=>{//定时器1
  2. new Promise((resolve)=>{
  3. console.log("1");
  4. resolve();
  5. }).then(()=>{//then
  6. console.log("2");
  7. })
  8.  
  9. setTimeout(()=>{//定时器1的子定时器
  10. console.log("3");
  11. })
  12. })
  13.  
  14. setTimeout(()=>{//定时器2
  15. console.log("4");
  16. })

我们来分析一下上面的代码:

第一步:代码中有两个定时器,分别是“定时器1”和“定时器2”,因为它俩都属于异步任务,所以会被加入到任务队列中。

第二步:除了“定时器1”和“定时器2”(这个两个任务都属于宏任务),已经没有别的任务了,此时主程序将“定时器1”从任务队列中取出来执行。然后输出1 ,

“定时器1”里面还有有两个任务,分别是微任务"then" 和 宏任务“定时器1的子定时器”,它俩都会被添加到任务队列中,这时任务队列中有“定时器2”、“then”、“定时器1的子定时器”。

第三步:主程序将“then”从任务队列中取出并执行,输出2  ,为什么会先取"then"呢?按代码顺序不应该是“定时器2”、“then”、“定时器1的子定时器” ?因为"then"是微任务,所以它的优先级

高于“定时器2”、“定时器1的子定时器”,也可以理解为,当有微任务进入队列时,它会放到宏任务的前面。

第四步:然后主程序会按顺序将“定时器2”、“定时器1的子定时器”从任务队列中取出来执行。

所以最后打印的结果是:1 2 4 3

大家有没有发现,主程序执行完成之后,它会从任务队列中去读取一个任务,然后放到主程序中执行。

只要任务队列中还有任务,主程序就会一直进行“读取”、“执行”操作。

所以可以得出以下结论:主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

教程参考地址:阮一峰老师的《JavaScript 运行机制详解:再谈Event Loop》

《JavaScript总结》js的运行机制的更多相关文章

  1. JS的运行机制

    代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...

  2. 关于js内部运行机制的一本好书

    读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...

  3. 试着讲清楚:js代码运行机制

    一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...

  4. js setTimeout运行机制

    在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...

  5. JavaScript闭包的底层运行机制

    转自:http://blog.leapoahead.com/2015/09/15/js-closure/ 我研究JavaScript闭包(closure)已经有一段时间了.我之前只是学会了如何使用它们 ...

  6. 从Event Loop谈JS的运行机制

    这里主要是结合Event Loop来谈JS代码是如何运行的. 事件循环对于我们平时开发可以说是特别重要,可以让我们写出更好的代码. 到这里相信我们已经知道了JS引擎是单线程,而且这里会用到前面说的的几 ...

  7. 前端读者 | 由setTimeout引发的JS引擎运行机制的研究

    本文来自 @xiaoyuze88 链接:http://xiaoyuze88.github.io/ 太久没碰代码了,那天想到关于循环调用setTimeout实现每隔一秒输出递增的数的那个问题,搞了搞,发 ...

  8. 剖析 Vue.js 内部运行机制 (1)

    1. new Vue() 之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周 期.事件. props. methods. data. computed ...

  9. 【JavaScript】JS的启动机制

    DOM  Event------------------>触发function() function  自身的调用 主要就是调用function 1.DOM Event 2.调用function

随机推荐

  1. 防止用户重发发生ajax请求

    1.前端限制 点击提交后,将该元素禁用,等待请求结束后再次释放(解除禁用). 可以使用ajax中的 success 请求成功后的回调函数进行按钮释放. 2.防抖动 暴力连续点击按钮,可以通过闭包里的  ...

  2. windows环境下wamp安装redis拓展

    环境: wamp集成环境 安装分为两部 1.安装redis客户端   https://github.com/ServiceStack/redis-windows/raw/master/download ...

  3. Nginx服务器中配置非80端口的端口转发方法详解

    这篇文章主要介绍了Nginx服务器中配置非80端口的端口转发方法详解,文中使用到了Nginx中的proxy_pass配置项,需要的朋友可以参考下 nginx可以很方便的配置成反向代理服务器: 1 2 ...

  4. 通过TensorFlow训练神经网络模型

    神经网络模型的训练过程其实质上就是神经网络参数的设置过程 在神经网络优化算法中最常用的方法是反向传播算法,下图是反向传播算法流程图: 从上图可知,反向传播算法实现了一个迭代的过程,在每次迭代的开始,先 ...

  5. 阿里云服务器搭建SS代理教程!!!

    二.搭建教程 1.环境介绍 阿里云服务器ECS(香港): 配置:cpu 1核心.内存 1GB.出网带宽 10Mbps. 系统:CentOS 7.4 64位 2.服务器端搭建 1)使用root用户,分别 ...

  6. shell编写自动化安装dhcp服务

    #!/bin/bash#Auth:Darius#自动化安装dhcp服务#"$1"为测试IP,用来查看IP段是否能通eno=`ifconfig|awk '{print $1}'|he ...

  7. 负载均衡器之 Haproxy

    1. 编译安装haproxy 官网: http://www.haproxy.org 1.1 下载haproxy # wget http://www.haproxy.org/download/1.6/s ...

  8. spring扩展点总结

    NamespaceHandler 通过自定义的NamespaceHandler,配合BeanDefinitionParser,可以完成自定义Bean的组装操作,对于BeanDefinition的数据结 ...

  9. SimpleCursorAdapter使用代码

    package com.kale.cursoradapter; import android.app.Activity; import android.database.Cursor; import ...

  10. How to setup Visual Studio without pain

    Visual Studio (VS) can be very hard to install. If you are lucky, one whole day may be enough to ins ...