微任务

线程和进程 进程和线程的概念可以这样理解： 进程是一个工厂，工厂有它的独立资源--工厂之间相互独立--线程是工厂中的工人，多个工人协作完成任务--工厂内有一个或多个工人--工人之间共享空间 工厂有多个工人，就相当于一个进程可以有多个线程，而且线程共享进程的空间。 进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位，系统会给它分配内存） 线程是 cpu 调试的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程。核心还是属于一个进程。） 浏览器是多进程的 浏览器是多进程的，每打开一个 tab 页，就相当于创建了一个独立的浏览器进程。 浏览器包含的进程： Browser 进程：浏览器的主进程（负责协调，主控），只有一个，作用有： 负责浏览器的界面显示，与用户交互，如前进，后退等 负责各个页面的管理，创建和销毁其它进程 将 Rendered 进程得到的内存中的 Bitmap ,绘制到用户界面上 网络资源的管理，下载 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。 GPU 进程：最多一个，用于 3D 绘制等。 浏览器渲染进程（浏览器内核）（ Render 进程，内部是多线程的）：默认每个 Tab 页面一个进程，互不影响。主要作用为： 页面渲染，脚本执行，事件处理等 在浏览器中打开一个网页相当于新起了一个进程

JS在浏览器运行情况： JS是单线程，是单线程，是单线程 通过以上场景描述,知道JS为什么被设计成单线程应该就容易理解了吧。 JS异步骚操作 场景描述: 如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着”卡死”,这样就导致了很差的用户体验 既然JS是单线程的,只能在一条线程上执行,又是如何实现的异步呢? 是通过的事件循环(event loop)实现异步，理解了event loop机制,就理解了JS的执行机制 JS中的event loop 观察以下代码的执行顺序 1234567 console.log(1)setTimeout(function(){ console.log(2)},0)console.log(3) 运行结果是: 1 3 2 也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫异步代码。 所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务 按照这种分类方式:JS的执行机制是 首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table 异步任务在event table中注册函数,当满足触发条件后,被推入event queue 同步任务进入主线程后一直执行,直到主线程空闲时

说在前头：事件循环和js语言本身没有关系，和js引擎也没有关系。 先看一个题目： setTimeout(()=>{ console.log(1); },10) for (let i=0; i<100000000; i++) {} console.log(2); setTimeout(()=>{ console.log(3); },0) Promise.resolve().then(function(){ console.log(4); }) console.log(5); 答案是 2 5 4 1 3 或 2 5 4 3 1。 这取决于这个for循环执行耗时。 先思考一个问题，我们的javascript代码是如何在浏览器或者是Node环境跑起来的。真正执行javascript代码的是谁？ 保证我们代码有序执行的都有哪些参与者？ 执行javascript代码的是javascript引擎(Engine)，比如chrome里是V8，safari里是javascriptCore。要想执行javascript代码只有引擎是不行的，还得有宿主环境,也叫javascript运行时环境(Runtime)，比如浏览器或者Node。宿主给引擎一段js代码，引擎才开始执行js代码。 在浏览器里js代码的执行是多个角色参与，看图： Call stack （js引擎内） Web API (浏览器提供)

1. 执行顺序说明 1. 清空主执行栈 2. 清空微任务队列 3. 运行一个timer队列的回调函数，询问微任务队列，如果有回调函数，清空。 4. 循环第3步，直到清空timer队列 5. 进入poll队列，执行poll队列的回调函数，询问微任务队列，清空微任务队列。 6. 循环第5步，清空poll队列 7.清空check队列 8. 从第2步再次循环 示例1: setTimeout(() => { console.log('timeout') }) setImmediate(() => { console.log('immediate') }) // node命令执行后，根据运行环境不同，先后顺序不一定。 // 如果setTimout回调函数先进入队列，先执行；否则setImmediate先执行 来源： https://www.cnblogs.com/lyraLee/p/11867953.html

事件循环介绍 浏览器中的事件循环（Event loop） 为了协调事件，用户交互，脚本，渲染，网络等，用户代理必须使用事件循环。 事件：PostMessage，MutationObserver 等 用户交互： click，onScroll等 渲染： 解析DOM，css等 脚本： js脚本执行 Javasc为什么是单线程的？ 浏览器js的作用时操作DOM，这决定了他只能是单线程，否则会带来很复杂的同步问题，比如假定Javasc同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 任务队列 单线程就意味着所有任务需要排队，如果因为任务CPU计算量大还好，但是I/O操作是闲着的，所以JS就设计成了一门异步的语言，不会做无畏的等待。任务可以分成两种，一种时同步任务，另一种是异步任务。 所有同步任务都在主线程上执行，形成一个执行栈。 主线程之外，还存在一个任务队列，只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 主线程不断重复上面的第三步。 主线程从“任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop （事件循环） 宏任务与微任务

一、promise本身是同步还是异步呢？ 众所周知，Promise是ES6提出的解决异步编程导致陷入回调地狱问题的，那么Promise是同步的还是异步的？可以确定的是，Promise本身是同步的，而他的.then和.catch为异步的。 举个栗子： console.log(1) let a = new Promise((res,rej) => { console.log(2); }); console.log(3); let b = new Promise((res,rej) => { console.log(4); }); console.log(5); //1,2,3,4,5 二、返回的异步代码执行顺序 （.then / .catah） console.log(1) let a = new Promise((res,rej) => { console.log(2); res(); }); console.log(3); let b = new Promise((res,rej) => { console.log(4); res(); }); console.log(5); a.then(() => { //先执行a，是因为.then是一个微任务，而且a最先进入微任务队列，所以现在执行a，在执行b，但都必须是在等到同步代码结束之后在进入执行队列； console.log(6) }

用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 疑惑： 怎么实现的延迟回调 原理： JavaScript语言的一大特点就是单线程，同一个时间只能做一件事 JavaScript任务可以分为两种，一种是同步任务，一种是异步任务 异步任务大致分为，宏任务，和微任务 所有同步任务都在主线程上执行，形成一个执行栈 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"中的微任务，其次是宏任务，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 主线程不断重复上面的第6步。 vue实现： vue 大多数情况下优先使用微任务， 很少的地方使用宏任务 vue nextTick 宏任务实现 优先检测 setImmediate if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { macroTimerFunc = () => { setImmediate(flushCallbacks) } } setImmediate 浏览器支持情况 其次检测 MessageChannel 支持情况 else if

本文转载于: 猿2048 网站➯ https://www.mk2048.com/blog/blog.php?id=ia1ja2c00j 每次我在写技术类文章的时候都喜欢用引用一个神话故事或者一位超级英雄。没错，因为我的中二病很严重，写代码的时候都幻想自己有一对机械手臂帮我在那啪啪啪的调试bug，别想歪了不是那种啪啪啪。 这次我要说的就是 蚁人 好吧，为什么要说蚁人那。如果你看过漫威（虽然我是DC粉）的超级英雄电影你应该知道蚁人的能力。 变小 🐜 --- 变小 🐜 --- 变小 🐜 --- 变小 🐜 --- 变小 🐜 变大 🐜 --- 变大 🐜 --- 变大 🐜 --- 变大 🐜 --- 变大 🐜 牛叉吹完，开始正题 蚁人的变大我认为就是宏任务 蚁人的变小我认为就是微任务 为什么这么说那？因为你想在<美队3>里蚁人内战之中变得很大，但是问题就来了，变大之后虽然力量有了加成，但是速度变得很慢，我现在不说你应该猜出宏任务的缺点了吧？ 同理，蚁人变小之后灵巧了不少，可以跟很多蚂蚁沟通，这些蚂蚁井然有序帮助蚁人，是不是这些小🐜很像微任务，那么微任务的好处你也猜到了吧？ 我们来引入谷歌的一位大神 Jake 的文章作为说明，原文标题：《Tasks, microtasks, queues and schedules》原文地址： Tasks, microtasks, queues and

本文转载于: 猿2048 网站⇒ https://www.mk2048.com/blog/blog.php?id=h22hi0h0kj 标签： eventloop 事件机制 node 原文地址： Tasks, microtasks, queues and schedules 鉴于上篇文章有提到过 微任务与宏任务，所以，在此做个细致补充： 话不多说，直接进入正文： [1] 本文主要根据网上资源总结而来，如有不对，请斧正。 [2] 需要知道的专业名词术语：synchronous：同步任务、asynchronous：异步任务、task queue/callback queue：任务队列、execution context stack：执行栈、heap：堆、stack：栈、macro-task：宏任务、micro-task：微任务 首先我们要知道两点： JavaScript是单线程的语言 Event Loop是javascript的执行机制 javascript事件循环 js是单线程，就像学生排队上厕所，学生需要排队一个一个上厕所，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类： 同步任务 异步任务 从图片可知

大家都知道js是单线程的脚本语言，在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，Event Loop方案应运而生… 个人博客了解一下： obkoro1.com js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。 在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？ 为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。 因为js是单线程语言，当遇到异步任务(如ajax操作等)时，不可能一直等待异步完成，再继续往下执行，在这期间浏览器是空闲状态，显而易见这会导致巨大的资源浪费。 当执行某个函数、用户点击一次鼠标，Ajax完成，一个图片加载完成等事件发生时，只要指定过回调函数，这些事件发生时就会进入执行栈队列中，等待主线程读取,遵循先进先出原则。 要明确的一点是，主线程跟执行栈是不同概念，主线程规定现在执行执行栈中的哪个事件。 主线程循环：即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。 当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列(Task Queue)。 当主线程将执行栈中所有的代码执行完之后，主线程将会去查看任务队列是否有任务 。如果有