js事件循环机制和优先级

浏览器的渲染进程是多线程，包括

GUI渲染线程
js引擎线程
事件触发线程
定时器触发线程
异步http请求线程

主执行栈和任务队列
所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的任务，推入主线程执行。上述过程的不断重复就是我们说的 Event Loop (事件循环)。

宏任务与微任务

从任务层面，在JS引擎中，我们可以按性质把任务分为两类，macrotask（宏任务）和 microtask（微任务）。

宏任务
(macro)task（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。
浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：
```
(macro)task->渲染->(macro)task->...
```
微任务
microtask（又称为微任务），可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。
也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。
microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

它们的执行顺序如下：

在事件循环中，每进行一次循环操作称为tick，通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，关键步骤总结如下：

执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

宏任务与微任务的优先级(浏览器)：

macrotask（按优先级顺序排列）: script(你的全部JS代码，“同步代码”）, setTimeout, setInterval, setImmediate, I/O,UI rendering
microtask（按优先级顺序排列）:process.nextTick,Promises（浏览器原生实现的 Promise）, Object.observe, MutationObserver（await后面的代码，Promise.then里面的代码也属于微任务）
JS引擎首先从macrotask queue中取出第一个任务，执行完毕后，将microtask queue中的所有任务取出，按顺序全部执行；
然后再从macrotask queue（宏任务队列）中取下一个，执行完毕后，再次将microtask queue（微任务队列）中的全部取出；
循环往复，直到两个queue中的任务都取完。

js事件循环机制和优先级相关推荐

JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...
js事件循环机制（await-async-事件循环）
await和async 异步函数 async function async关键字用于声明一个异步函数: async是asynchronous单词的缩写,异步.非同步: sync是synchronous ...
彻底搞懂JS事件循环机制（event loop）
知识点: js异步实现 EventLoop.消息队列宏任务与微任务同步模式与异步模式首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM.这决定了它只能是单线程(例如多线 ...
js结束当前循环关键词_干货｜|什么是事件循环机制
事件循环机制经常有小伙伴问到我什么是 js 的事件循环机制,这里我就简单来给这些有困惑的小伙伴进行一下解答. 我将从下面几个方面来循序渐进的为大家来进行讲解: 区分进程和线程浏览器的多进程浏览器 ...
对JavaScript事件循环机制的理解
前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS ...
js事件循环——看输出顺序
js事件循环: 由于js是单线程的,同一时间只能干一件事情,当期宿主环境为浏览器时,若一个任务耗时过长会导致页面阻塞.因此有了js事件循环机制,它将任务分成同步任务和异步任务,同步任务在主线程不断执行 ...
js中如何得到循环中的点击的这个id_Js篇面试题9请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
Js篇-面试题9-请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...

js事件循环机制和优先级

js事件循环机制和优先级相关推荐

最新文章

热门文章