浅谈浏览器架构、单线程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架构的。