宏任务和微任务
- 哪些属于宏任务？
- 哪些属于微任务？
- 事件循环，消息队列与宏任务、微任务之间的关系是什么？
- 为任务添加和执行流程示意图
- setTimeout
- setInterval
- setImmediate
- requestAnimationFrame
- I/O
- UI渲染
- Promise
- MutationObserver
- process.nextTick
- queueMicrotask
- 宏任务入队消息队列，可以将消息队列理解为宏任务队列
- 每个宏任务内有一个微任务队列，执行过程中微任务入队当前宏任务的微任务队列
- 宏任务微任务队列为空时才会执行下一个宏任务
- 事件循环捕获队列出队的宏任务和微任务并执行
为任务添加和执行流程示意图假设在执行解析HTML这个宏任务的过程中，产生了Promise和MutationObserver这两个微任务 。
// parse HTML···Promise.resolve();removeChild();微任务队列会如何表现呢？
文章插图
文章插图
图片引自：极客时间的《浏览器工作原理与实践》
过程可以拆为以下几步：
- 主线程执行JS Promise.resolve(); removeChild();
- parseHTML宏任务暂停
- Promise和MutationObserver微任务入队到parseHTML宏任务的微任务队列
- 微任务1 Promise.resolve()执行
- 微任务2 removeChild();执行
- 微任务队列为空，parseHTML宏任务继续执行
- parseHTML宏任务完成，执行下一个宏任务
- 消息队列和事件循环
- setTimeout
- XMLHttpRequest
- 宏任务
文章插图
在线程中引入事件循环
文章插图
渲染进程线程之间发送任务
文章插图
文章插图
线程模型：队列 + 循环
文章插图
跨进程发送消息
文章插图
单个任务执行时间过久
文章插图
setTimeout长任务导致定时器被延后执行
文章插图
循环嵌套调用 setTimeout
文章插图
XMLHttpRequest消息循环系统调用栈记录
文章插图
XMLHttpRequest 工作流程图
文章插图
HTTPS 混合内容警告
文章插图
【浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务】
使用 XMLHttpRequest 混合资源失效
文章插图
宏任务宏任务延时无法保证
文章插图
如果文中有不对的地方，欢迎指正和交流~
推荐阅读
- 服务器概念、组成、分类和架构之争
- 如何把网页设置成极速？
- 今日头条技术架构到底有多牛？
- 生意参谋子账号专用浏览器 生意参谋可以开多少个子账号
- 80后架构师教你学ApacheBeam，一个开源统一分布式数据处理编程库
- 架构的腐化是必然的
- 浅谈数据库分布式架构设计
- MySQL数据库架构和同步复制流程
- 基于LAMP环境搭建论坛
- 软件架构概述