1、javascript是单线程的

javascript是单线程的,意思是javascript在同一时间内只能做一件事情。

为什么是单线程的?

因为js的主要用途是用于用户交互和操作DOM,如果是多线程的,会引起复杂的同步问题, 比如一个线程操作某个节点的内容,另一个线程同一时间却在删除这个节点,这时候到底该执行那一条命令呢?到底以哪一个线程为准呢。

2、同步和异步

同步是阻塞模式,后一个任务必须等待前一个任务执行完后才能继续执行。

异步是非阻塞模式,当遇到异步任务无需等待其执行完,继续向下执行,而异步任务会进入协程执行,执行完后将回调任务加入任务队列,等到主线程执行完成后,一条一条的读取任务队列中的任务。

协程是什么?

3、任务(消息)队列

同步任务都在主线程上执行并且会产生一个执行栈

js的主线程外有一个任务队列,当异步任务执行完后,会将其"回掉函数"push进这个任务队列,当主线程执行完成后,会一个一个的读取任务队列中的任务并推入主线程的执行栈开始执行。

4、EventLoop

js主线程从"任务队列"当中读取事件推入执行栈,这个过程不断重复的,所以这个过程被称作"事件循环"

5、setTimeout(fn, 0)

setTimeout(fn,0)意思是将回掉函数立即加入任务队列 ,在第一个eventloop执行完后也就是在主线程将同步任务执行完后,第二个eventloop开始时执行,记住是第二个eventloop才执行。不精确,因为同步任务有可能很耗时。

6、微任务和宏任务

微任务:

process.nextTick()
Promise.then
Object.observe() (已经废除)
MutaionObserver

宏任务

setTimeout
setInterval
setImmediate
IO
UI渲染

在一个eventLoop中,执行完宏任务后就会清空微任务队列,所以微任务在本次eventLoop的执行栈的尾部执行的, 而异步任务会被推入任务队列在下一个eventLoop中执行, 所以微任务先于异步任务执行的。

https://juejin.im/post/5c337ae06fb9a049bc4cd218#comment

从EventLoop到宏任务与微任务的更多相关文章

  1. JS中EventLoop、宏任务与微任务的个人理解

    为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...

  2. Event Loop、 宏任务和微任务

    本文将介绍我自己对JS Event Loop 和 宏任务.微任务的理解. 二话不说先上图: 接下来将会针对此图讲解什么是Event Loop 什么事宏任务和微任务(其实聪明的你们通过图大体也能了解的是 ...

  3. js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  4. 浏览器端时间循环与nodejs端时间循环的不同之处(宏任务与微任务)

    浏览器端与node端都有宏任务与微任务的概念.字面意思上看宏任务就是耗时间比较长的任务,而微任务是耗时短的任务. 在浏览器端,宏任务包括setTimeout,setInterval,微任务则包括Pro ...

  5. js中的宏任务与微任务

    如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...

  6. js 宏任务和微任务

    .宏任务(macrotask )和微任务(microtask ) macrotask 和 microtask 表示异步任务的两种分类. 在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首 ...

  7. 宏任务、微任务与Event Loop

    说到宏任务和微任务,我们就不得不提 Event Loop 了 JS的本质是单线: 1. 一般来说,非阻塞性的任务采取同步的方式,直接在主线程的执行栈完成. 2. 一般来说,阻塞性的任务都会采用异步来执 ...

  8. JavaScript的事件队列(Event Queue)---宏任务和微任务

    前言 在写代码的时候经常思考一个问题,到底是那个函数先执行,本身JavaScript是一门单线程的语言,意思就是按照顺序执行.但是加入一些setTimeout和promise的函数来又实现了异步操作, ...

  9. 一道题理解setTimeout,Promise,async/await以及宏任务与微任务

    今天看到这样一道面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2(); consol ...

随机推荐

  1. java线程之线程同步

    本篇由于涉及多线程操作,所以线程是使用实现Runnable接口来创建的. 在上篇所示线程任务中,我们不难发现,是存在三步操作的: 第一:打印语句: 第二:计算sum=sum-1: 第三:线程休眠. 那 ...

  2. 五分钟学会centos配置gitlab

    下载gitlab 亲测: centos6.5 安装依赖包: : yum install curl policycoreutils policycoreutils-python openssh-serv ...

  3. C++ 利用流来进行string和其他类的转换

    通过这种方法可以实现任意转换,需要头文件 #include<string> #include<sstream> 期中sstream提供了我们的主角string流,下面给出int ...

  4. Spring MVC 的 XML 配置方式

    索引: 开源Spring解决方案--lm.solution 参看代码 GitHub: solution/pom.xml solution/webapi/pom.xml solution/mapper/ ...

  5. 读《图解HTTP》有感-(确保WEB安全的HTTPS)

    写在前面 该章节分析当前使用的HTTP协议中存在的安全性问题,以及采用HTTPS协议来规避这些可能存在的缺陷 正文 1.HTTP的缺点 1.1.由于HTTP不具备加密功能,所以在通信链路上,报文是以明 ...

  6. JS的进阶技巧

    前言 你真的了解JS吗,看完全篇,你可能对人生产生疑问. typeof typeof运算符,把类型信息当做字符串返回. //正则表达式 是个什么 ? typeof /s/ // object //nu ...

  7. Axios源码深度剖析 - 替代$.ajax,成为xhr的新霸主

    前戏 在正式开始axios讲解前,让我们先想想,如何对现有的$.ajax进行简单的封装,就可以直接使用原声Promise了? let axios = function(config){ return ...

  8. 常见js特效的思路

    1.焦点轮播路 1.布局:父容器用overflow:hidden隐藏多余的图片 2:通过ID获取到重要的元素(父容器.图片列表.左右切换按钮等) 给左右按钮加上点击事件,通过JS更新图片的位置,判断边 ...

  9. 两种方法轻松搞定-- Eclipse 安装FindBugs插件

    1安装:首先到官方网站下载最新版本FindBugs    http://findbugs.sourceforge.net/downloads.html              将 edu.umd.c ...

  10. Android监测手指上下左右滑动屏幕

    在开发android程序时,有时会需要监测手指滑动屏幕,当手指朝上下左右不同方向滑动时做出不同的响应,那怎么去实现呢? 利用Android提供的手势监测器就可以很方便的实现,直接上代码(已测试通过) ...