宏任务、微任务与Event Loop
说到宏任务和微任务,我们就不得不提 Event Loop 了
JS的本质是单线:
1. 一般来说,非阻塞性的任务采取同步的方式,直接在主线程的执行栈完成。
2. 一般来说,阻塞性的任务都会采用异步来执行,异步的工作一般会交给其他线程完成,然后回调函数会放到事件队列中。
当主线程的任务执行完了(执行栈空了),JS会去询问事件队列
执行一个宏任务(先执行同步代码)-->执行所有微任务-->UI render-->执行下一个宏任务-->执行所有微任务-->UI render-->......
根据HTML Standard,一轮事件循环执行结束之后,下轮事件循环执行之前开始进行UI render。即:macro-task任务执行完毕,接着执行完所有的micro-task任务后,此时本轮循环结束,开始执行UI render。UI render完毕之后接着下一轮循环。但是UI render不一定会执行,因为需要考虑ui渲染消耗的性能已经有没有ui变动
哪些是宏任务、微任务呢?
推荐阅读:https://juejin.im/post/5b73d7a6518825610072b42b
宏任务macrotask:主代码块 > setImmediate > MessageChannel > setTimeout / setInterval (大部分浏览器会把DOM事件回调优先处理 因为要提升用户体验 给用户反馈,其次是network IO操作的回调,再然后是UIrender,之后的顺序就难以捉摸了,其实不同浏览器的表现也不太一样,这里不做过多讨论。)
微任务microtask:process.nextTick > Promise = MutationObserver
就是说任务执行的顺序是建立与优先级之上的:
如果队列已经有一个setTImeout的宏任务,后来又加入了主代码的宏任务,会让主代码的的任务插队。
宏任务、微任务与Event Loop的更多相关文章
- Js 运行机制 event loop
Js - 运行机制 (Even Loop) Javascript 的单线程 - 引用思否的说法: JavaScript的一个语言特性(也是这门语言的核心)就是单线程.什么是单线程呢?简单地说就是同一时 ...
- JavaScipt 中的事件循环(event loop),以及微任务 和宏任务的概念
说事件循环(event loop)之前先要搞清楚几个问题. 1. js为什么是单线程的? 试想一下,如果js不是单线程的,同时有两个方法作用dom,一个删除,一个修改,那么这时候浏览器该听谁的? ...
- JavaScript Event Loop和微任务、宏任务
为什么JavaScript是单线程? JavaScript的一大特点就是单线程, 同一时间只能做一件事情,主要和它的用途有关, JavaScript主要是控制和用户的交互以及操作DOM.注定它是单线程 ...
- Event Loop、 宏任务和微任务
本文将介绍我自己对JS Event Loop 和 宏任务.微任务的理解. 二话不说先上图: 接下来将会针对此图讲解什么是Event Loop 什么事宏任务和微任务(其实聪明的你们通过图大体也能了解的是 ...
- Event Loop我知道,宏任务微任务是什么鬼?
在介绍宏任务和微任务之前,先抛出一个问题.相信大家在面试的时候,会遇到这样的相似的问题: setTimeout(function(){undefined console.log('1') }); ne ...
- 理解 Events Loop 宏任务微任务
在 JavaScript 中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask). MacroTask(宏任务) script全部代码.setTimeout.setI ...
- Javascript之Event Loop
先看段代码: console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve, rejec ...
- JS运行机制之 Event Loop 的思考
先举个栗子,如下: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); //一秒之后输出几乎没 ...
- 浏览器与Node的事件循环(Event Loop)有何区别?
前言 本文我们将会介绍 JS 实现异步的原理,并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的. 一.线程与进程 1. 概念 我们经常说 JS 是单线程执行的,指的是一个进程里 ...
随机推荐
- entity-framework-core – 实体框架核心RC2表名称复数
参考地址:https://docs.microsoft.com/zh-cn/ef/core/modeling/relational/tables http://www.voidcn.com/artic ...
- interface Part1(接口详解)
1. 在日常生活中,手机.笔记本电脑.平板电脑等电子产品提供了不同类型的接口用于充电或者连接不同的设备. 不同类型接口的标准不一样,例如电压.尺寸等. 2. 在C#语言中,接口也会定义一种标准,如果需 ...
- 遇到 GLFW 我的demo可以运行 但是公司的程序调用我的so运行不起来
//to do 原 因: 发现 自身demo的程序的shaders更新了 但是公司程序却没有更新 解决办法:更新公司程序的shaders 为最新版本 吸取的教训: 不仅仅要更新公司程序 ...
- iOS 中 UIView 和 CALayer 的关系
UIView 有一个名叫 layer ,类型为 CALayer 的对象属性,它们的行为很相似,主要区别在于:CALayer 继承自 NSObject ,不能够响应事件. 这是因为 UIView 除了负 ...
- 【robotframework】robotframework基本使用
一.创建项目 1.创建测试项目 选择菜单栏 file----->new Project Name 输入项目名称:Type 选择 Directory. 2.创建测试套件 右键点击“测试项目”选择 ...
- drf-过滤组件|分页组件|过滤器
目录 drf-过滤组件|分页组件|过滤器 群查接口各种筛选组件数据准备 drf过滤组件 搜索过滤组件 | SearchFilter 案例: 排序过滤组件 | OrderingFilter 案例: dr ...
- URLErro和HTTPError
url error URLError 产生的原因主要有: 没有网络连接 服务器连接失败 找不到指定的服务器 我们可以用try except语句来捕获相应的异常 from urllib import r ...
- Android笔记 (二) Android的核心---Activity
什么是Activity Activity是Android应用程序核心组件中最基本的一个,是用户和程序交互的窗口,一个activity通常对应一个单独的视图,一个APP由一个或者多个activity构成 ...
- 记录java+testng运行selenium(一)
整体的流程为下图 整体思路为: 1. 由程序开始运行时去读取ini文件中存储的浏览器及需要打开的url 2. test运行时通过description实现数据驱动,主要做两件事 2.1 第一件事为:读 ...
- C++——Inheritence
一种错误的观念: 子类继承父类,只把父类的公有成员继承下来,私有的不会继承. 事实上无论是如何继承,都会把父类的所有成员继承下来. #include<iostream> using nam ...