ajax请求是宏任务还是微任务_浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务

作者：趁你还年轻

转发链接：https://segmentfault.com/a/1190000022950333

前言

看到这些词仿佛比较让人摸不着头脑，其实在我们的日常开发中，早就和它们打过交道了。

我来举几个常见的例子：

• 我执行了一段js，页面就卡了挺久才有响应
• 我触发了一个按钮的click事件，click事件处理器做出了响应
• 我用setTimeout(callback, 1000)给代码加了1s的延时，1秒里发生了很多事情，然后功能正常了
• 我用setInterval(callback, 100)给代码加了100ms的时间轮训，直到期待的那个变量出现再执行后续的代码，并且结合setTimeout删除这个定时器
• 我用Promise，async/await顺序执行了异步代码
• 我用EventEmitter、new Vue()做事件广播订阅
• 我用MutationObserver监听了DOM更新
• 我手写了一个Event类做事件的广播订阅
• 我用CustomEvent创建了自定义事件
• 我·······

其实上面举的这些click, setTimeout, setInterval, Promise，async/await, EventEmitter, MutationObserver, Event类, CustomEvent与多进程、单线程、事件循环、消息队列、宏任务、微任务或多或少的都有所联系。

而且也与浏览器的运行原理有一些关系，作为每天在浏览器里辛勤耕耘的前端工程师们，浏览器的运行原理(多进程、单线程、事件循环、消息队列、宏任务、微任务)可以说是必须要掌握的内容了，不仅对面试有用，对手上负责的开发工作也有很大的帮助。

• 浅谈浏览器
• 架构浏览器可以是哪种架构？
• 如何理解Chrome的多进程架构？
• 前端最核心的渲染进程包含哪些线程？
• 主线程(Main thread)(下载资源、执行js、计算样式、进行布局、绘制合成)
• 光栅线程(Raster thread)
• 合成线程(Compositor thread)
• 工作线程(Worker thread)
• 浅谈单线程jsjs引擎图什么是单线程js？
• 单线程js属于浏览器的哪个进程？
• js为什么要设计成单线程的？
• 事件循环与消息队列什么是事件循环？
• 什么是消息队列？
• 如何实现一个 EventEmitter(支持 on,once,off,emit)？
• 宏任务和微任务哪些属于宏任务？
• 哪些属于微任务？
• 事件循环，消息队列与宏任务、微任务之间的关系是什么？
• 为任务添加和执行流程示意图
• 浏览器页面循环系统原理图消息队列和事件循环setTimeoutXMLHttpRequest宏任务
• 参考资料

浅谈Chrome架构

浏览器可以是哪种架构？

浏览器本质上也是一个软件，它运行于操作系统之上，一般来说会在特定的一个端口开启一个进程去运行这个软件，开启进程之后，计算机为这个进程分配CPU资源、运行时内存，磁盘空间以及网络资源等等，通常会为其指定一个PID来代表它。

先来看看我的机器上运行的微信和Chrome的进程详情：

如果自己设计一个浏览器，浏览器可以是哪种架构呢？

• 单进程架构(线程间通信)
• 多进程架构(进程间IPC通信)

如果浏览器单进程架构的话，需要在一个进程内做到网络、调度、UI、存储、GPU、设备、渲染、插件等等任务，通常来说可以为每个任务开启一个线程，形成单进程多线程的浏览器架构。

但是由于这些功能的日益复杂，例如将网络，存储，UI放在一个线程中的话，执行效率和性能越来越低下，不能再向下拆分出类似“线程”的子空间。

因此，为了逐渐强化浏览器的功能，于是产生了多进程架构的浏览器，可以将网络、调度、UI、存储、GPU、设备、渲染、插件等等任务分配给多个单独的进程，在每一个单独的进程内，又可以拆分出多个子线程，极大程度地强化了浏览器。

如何理解Chrome的多进程架构？

Chrome作为浏览器界里的一哥，它也是多进程IPC架构的。

Chrome多进程架构主要包括以下4个进程：

• Browser进程(负责地址栏、书签栏、前进后退、网络请求、文件访问等)
• Renderer进程(负责一个Tab内所有和网页渲染有关的所有事情，是最核心的进程)
• GPU进程(负责GPU相关的任务)
• Plugin进程(负责Chrome插件相关的任务)

Chrome 多进程架构的优缺点优点

• 每一个Tab就是要给单独的进程
• 由于每个Tab都有自己独立的Renderer进程，因此某一个Tab出问题不会影响其它Tab

缺点

• Tab间内存不共享，不同进程内存包含相同内容

Chrome多进程架构实锤图

前端最核心的渲染(Renderer)进程包含哪些线程？

渲染进程主要包括4个线程：

• 主线程(Main thread)(下载资源、执行js、计算样式、进行布局、绘制合成)
• 光栅线程(Raster thread)
• 合成线程(Compositor thread)
• 工作线程(Worker thread)

渲染进程的主线程知识点：

• 下载资源：主线程可以通过Browser进程的network线程下载图片，css，js等渲染DOM需要的资源文件
• 执行JS：主线程在遇到