浏览器的工作原理你真的全知道嘛？史上最全图解其原理

能每一个前端工程师都想要理解浏览器的工作原理。

我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么；

我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；

我们希望更细致地了解浏览器的渲染流程。

浏览器的多进程架构

一个好的程序常常被划分为几个相互独立又彼此配合的模块，浏览器也是如此，以 Chrome 为例，它由多个进程组成，每个进程都有自己核心的职责，它们相互配合完成浏览器的整体功能，每个进程中又包含多个线程，一个进程内的多个线程也会协同工作，配合完成所在进程的职责。

对一些前端开发同学来说，进程和线程的概念可能会有些模糊，为了更好的理解浏览器的多进程架构，这里我们简单讨论一下进程和线程。

进程（process）和线程（thread）

进程就像是一个有边界的生产厂间，而线程就像是厂间内的一个个员工，可以自己做自己的事情，也可以相互配合做同一件事情。

当我们启动一个应用，计算机会创建一个进程，操作系统会为进程分配一部分内存，应用的所有状态都会保存在这块内存中，应用也许还会创建多个线程来辅助工作，这些线程可以共享这部分内存中的数据。如果应用关闭，进程会被终结，操作系统会释放相关内存。更生动的示意图如下：

一个进程还可以要求操作系统生成另一个进程来执行不同的任务，系统会为新的进程分配独立的内存，两个进程之间可以使用 IPC （Inter Process Communication）进行通信。很多应用都会采用这样的设计，如果一个工作进程反应迟钝，重启这个进程不会影响应用其它进程的工作。

如果对进程及线程的理解还存在疑惑，可以参考下述文章：

http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

浏览器的架构

有了上面的知识做铺垫，我们可以更合理的讨论浏览器的架构了，其实如果要开发一个浏览器，它可以是单进程多线程的应用，也可以是使用 IPC 通信的多进程应用。

不同浏览器的架构模型

不同浏览器采用了不同的架构模式，这里并不存在标准，本文以 Chrome 为例进行说明：

Chrome 采用多进程架构，其顶层存在一个 Browser process 用以协调浏览器的其它进程。

Chrome 的不同进程

具体说来，Chrome 的主要进程及其职责如下：

Browser Process：

负责包括地址栏，书签栏，前进后退按钮等部分的工作；
负责处理浏览器的一些不可见的底层操作，比如网络请求和文件访问；

Renderer Process：

负责一个 tab 内关于网页呈现的所有事情

Plugin Process：

负责控制一个网页用到的所有插件，如 flashGPU Process
负责处理 GPU 相关的任务

不同进程负责的浏览器区域示意图

Chrome 还为我们提供了「任务管理器」，供我们方便的查看当前浏览器中运行的所有进程及每个进程占用的系统资源，右键单击还可以查看更多类别信息。

通过「页面右上角的三个点点点 --- 更多工具 --- 任务管理器」即可打开相关面板。

Chrome 多进程架构的优缺点

优点

某一渲染进程出问题不会影响其他进程更为安全，在系统层面上限定了不同进程的权限

缺点

由于不同进程间的内存不共享，不同进程的内存常常需要包含相同的内容。

为了节省内存，Chrome 限制了最多的进程数，最大进程数量由设备的内存和 CPU 能力决定，当达到这一限制时，新打开的 Tab 会共用之前同一个站点的渲染进程。

测试了一下在 Chrome 中打开不断打开知乎首页，在 Mac i5 8g 上可以启动四十多个渲染进程，之后新打开 tab 会合并到已有的渲染进程中。

Chrome 把浏览器不同程序的功能看做服务，这些服务可以方便的分割为不同的进程或者合并为一个进程。以 Broswer Process 为例，如果 Chrome 运行在强大的硬件上，它会分割不同的服务到不同的进程，这样 Chrome 整体的运行会更加稳定，但是如果 Chrome 运行在资源贫瘠的设备上，这些服务又会合并到同一个进程中运行，这样可以节省内存。

iframe 的渲染 -- Site Isolation

在上面的进程图中我们还可以看到一些进程下还存在着 Subframe，这就是 Site Isolation 机制作用的结果。

Site Isolation 机制从 Chrome 67 开始默认启用。这种机制允许在同一个 Tab 下的跨站 iframe 使用单独的进程来渲染，这样会更为安全。

iframe 会采用不同的渲染进程

Site Isolation 被大家看做里程碑式的功能，其成功实现是多年工程努力的结果。Site Isolation 不是简单的叠加多个进程。这种机制在底层改变了 iframe 之间通信的方法，Chrome 的其它功能都需要做对应的调整，比如说 devtools 需要相应的支持，甚至 Ctrl + F 也需要支持。关于 Site Isolation 的更多内容可参考下述链接：

https://developers.google.com/web/updates/2018/07/site-isolation

介绍完了浏览器的基本架构模式，接下来我们看看一个常见的导航过程对浏览器来说究竟发生了什么。

导航过程发生了什么

也许大多数人使用 Chrome 最多的场景就是在地址栏输入关键字进行搜索或者输入地址导航到某个网站，我们来看看浏览器是怎么看待这个过程的。

我们知道浏览器 Tab 外的工作主要由 Browser Process 掌控，Browser Process 又对这些工作进一步划分，使用不同线程进行处理：

UI thread ：控制浏览器上的按钮及输入框；
network thread: 处理网络请求，从网上获取数据；
storage thread: 控制文件等的访问；

浏览器主进程中的不同线程

回到我们的问题，当我们在浏览器地址栏中输入文字，并点击回车获得页面内容的过程在浏览器看来可以分为以下几步：

处理输入

UI thread 需要判断用户输入的是 URL 还是 query；

开始导航

当用户点击回车键，UI thread 通知 network thread 获取网页内容，并控制 tab 上的 spinner 展现，表示正在加载中。

network thread 会执行 DNS 查询，随后为请求建立 TLS 连接。

UI thread 通知 Network thread 加载相关信息

如果 network thread 接收到了重定向请求头如 301，network thread 会通知 UI thread 服务器要求重定向，之后，另外一个 URL 请求会被触发。

读取响应

当请求响应返回的时候，network thread 会依据 Content-Type 及 MIME Type sniffing 判断响应内容的格式。

判断响应内容的格式

如果响应内容的格式是 HTML ，下一步将会把这些数据传递给 renderer process，如果是 zip 文件或者其它文件，会把相关数据传输给下载管理器。

Safe Browsing 检查也会在此时触发，如果域名或者请求内容匹配到已知的恶意站点，network thread 会展示一个警告页。此外 CORB 检测也会触发确保敏感数据不会被传递给渲染进程。

查找渲染进程

当上述所有检查完成，network thread 确信浏览器可以导航到请求网页，network thread 会通知 UI thread 数据已经准备好，UI thread 会查找到一个 renderer process 进行网页的渲染。

收到 Network thread 返回的数据后，UI thread 查找相关的渲染进程由于网络请求获取响应需要时间，这里其实还存在着一个加速方案。当 UI thread 发送 URL 请求给 network thread 时，浏览器其实已经知道了将要导航到那个站点。UI thread 会并行的预先查找和启动一个渲染进程，如果一切正常，当 network thread 接收到数据时，渲染进程已经准备就绪了，但是如果遇到重定向，准备好的渲染进程也许就不可用了，这时候就需要重启一个新的渲染进程。

确认导航

进过了上述过程，数据以及渲染进程都可用了， Browser Process 会给 renderer process 发送 IPC 消息来确认导航，一旦 Browser Process 收到 renderer process 的渲染确认消息，导航过程结束，页面加载过程开始。

此时，地址栏会更新，展示出新页面的网页信息。history tab 会更新，可通过返回键返回导航来的页面，为了让关闭 tab 或者窗口后便于恢复，这些信息会存放在硬盘中。

额外的步骤

一旦导航被确认，renderer process 会使用相关的资源渲染页面，下文中我们将重点介绍渲染流程。当 renderer process 渲染结束（渲染结束意味着该页面内的所有的页面，包括所有 iframe 都触发了 onload 时），会发送 IPC 信号到 Browser process， UI thread 会停止展示 tab 中的 spinner。

Renderer Process 发送 IPC 消息通知 browser process 页面已经加载完成

当然上面的流程只是网页首帧渲染完成，在此之后，客户端依旧可下载额外的资源渲染出新的视图。

在这里我们可以明确一点，所有的 JS 代码其实都由 renderer Process 控制的，所以在你浏览网页内容的过程大部分时候不会涉及到其它的进程。不过也许你也曾经监听过 beforeunload 事件，这个事件再次涉及到 Browser Process 和 renderer Process 的交互，当当前页面关闭时（关闭 Tab ，刷新等等），Browser Process 需要通知 renderer Process 进行相关的检查，对相关事件进行处理。

浏览器进程发送 IPC 消息给渲染进程，通知要离开当前网站了如果导航由 renderer process 触发（比如在用户点击某链接，或者 JS 执行 window.location="http://newsite.com" ） renderer process 会首先检查是否有 beforeunload 事件处理器，导航请求由 renderer process 传递给 Browser process。

如果导航到新的网站，会启用一个新的 render process 来处理新页面的渲染，老的进程会留下来处理类似 unload 等事件。

关于页面的生命周期，更多内容可参考 Page Lifecycle API 。

浏览器进程发送 IPC 消息到新的渲染进程通知渲染新的页面，同时通知旧的渲染进程卸载

除了上述流程，有些页面还拥有 Service Worker （服务工作线程），Service Worker 让开发者对本地缓存及判断何时从网络上获取信息有了更多的控制权，如果 Service Worker 被设置为从本地 cache 中加载数据，那么就没有必要从网上获取更多数据了。

值得注意的是 service worker 也是运行在渲染进程中的 JS 代码，因此对于拥有 Service Worker 的页面，上述流程有些许的不同。

当有 Service Worker 被注册时，其作用域会被保存，当有导航时，network thread 会在注册过的 Service Worker 的作用域中检查相关域名，如果存在对应的 Service worker，UI thread 会找到一个 renderer process 来处理相关代码，Service Worker 可能会从 cache 中加载数据，从而终止对网络的请求，也可能从网上请求新的数据。

Service Worker 依据具体情形做处理

关于 Service Worker 的更多内容可参考：

https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

如果 Service Worker 最终决定通过网上获取数据，Browser 进程和 renderer 进程的交互其实会延后数据的请求时间。Navigation Preload 是一种与 Service Worker 并行的加速加载资源的机制，服务端通过请求头可以识别这类请求，而做出相应的处理。

渲染进程几乎负责 Tab 内的所有事情，渲染进程的核心目的在于转换 HTML CSS JS 为用户可交互的 web 页面。渲染进程中主要包含以下线程：

渲染进程包含的线程

主线程 Main thread
工作线程 Worker thread
排版线程 Compositor thread
光栅线程 Raster thread

后文我们将逐步介绍不同线程的职责，在此之前我们先看看渲染的流程。

构建 DOM

当渲染进程接收到导航的确认信息，开始接受 HTML 数据时，主线程会解析文本字符串为 DOM。

渲染 html 为 DOM 的方法由 HTML Standard 定义。

加载次级的资源

网页中常常包含诸如图片，CSS，JS 等额外的资源，这些资源需要从网络上或者 cache 中获取。主进程可以在构建 DOM 的过程中会逐一请求它们，为了加速 preload scanner 会同时运行，如果在 html 中存在 <img> <link> 等标签，preload scanner 会把这些请求传递给 Browser process 中的 network thread 进行相关资源的下载。

3.JS 的下载与执行

当遇到 <script> 标签时，渲染进程会停止解析 HTML，而去加载，解析和执行 JS 代码，停止解析 html 的原因在于 JS 可能会改变 DOM 的结构（使用诸如 documwnt.write()等 API）。

不过开发者其实也有多种方式来告知浏览器应对如何应对某个资源，比如说如果在<script> 标签上添加了 async 或 defer 等属性，浏览器会异步的加载和执行 JS 代码，而不会阻塞渲染。更多的方法可参考 Resource Prioritization – Getting the Browser to Help You。

样式计算

仅仅渲染 DOM 还不足以获知页面的具体样式，主进程还会基于 CSS 选择器解析 CSS 获取每一个节点的最终的计算样式值。即使不提供任何 CSS，浏览器对每个元素也会有一个默认的样式。

渲染进程主线程计算每一个元素节点的最终样式值

获取布局

想要渲染一个完整的页面，除了获知每个节点的具体样式，还需要获知每一个节点在页面上的位置，布局其实是找到所有元素的几何关系的过程。其具体过程如下：

通过遍历 DOM 及相关元素的计算样式，主线程会构建出包含每个元素的坐标信息及盒子大小的布局树。布局树和 DOM 树类似，但是其中只包含页面可见的元素，如果一个元素设置了 display:none ，这个元素不会出现在布局树上，伪元素虽然在 DOM 树上不可见，但是在布局树上是可见的。

绘制各元素

即使知道了不同元素的位置及样式信息，我们还需要知道不同元素的绘制先后顺序才能正确绘制出整个页面。在绘制阶段，主线程会遍历布局树以创建绘制记录。绘制记录可以看做是记录各元素绘制先后顺序的笔记。

主线程依据布局树构建绘制记录

合成帧

熟悉 PS 等绘图软件的童鞋肯定对图层这一概念不陌生，现代 Chrome 其实利用了这一概念来组合不同的层。

复合是一种分割页面为不同的层，并单独栅格化，随后组合为帧的技术。不同层的组合由 compositor 线程（合成器线程）完成。

主线程会遍历布局树来创建层树（layer tree），添加了 will-change CSS 属性的元素，会被看做单独的一层。

主线程遍历布局树生成层树

你可能会想给每一个元素都添加上 will-change，不过组合过多的层也许会比在每一帧都栅格化页面中的某些小部分更慢。为了更合理的使用层，可参考坚持仅合成器的属性和管理层计数。

一旦层树被创建，渲染顺序被确定，主线程会把这些信息通知给合成器线程，合成器线程会栅格化每一层。有的层的可以达到整个页面的大小，因此，合成器线程将它们分成多个磁贴，并将每个磁贴发送到栅格线程，栅格线程会栅格化每一个磁贴并存储在 GPU 显存中。

栅格线程会栅格化每一个磁贴并存储在 GPU 显存中

一旦磁贴被光栅化，合成器线程会收集称为绘制四边形的磁贴信息以创建合成帧。

合成帧随后会通过 IPC 消息传递给浏览器进程，由于浏览器的 UI 改变或者其它拓展的渲染进程也可以添加合成帧，这些合成帧会被传递给 GPU 用以展示在屏幕上，如果滚动发生，合成器线程会创建另一个合成帧发送给 GPU。

合成器线程会发送合成帧给 GPU 渲染

合成器的优点在于，其工作无关主线程，合成器线程不需要等待样式计算或者 JS 执行，这就是为什么合成器相关的动画最流畅，如果某个动画涉及到布局或者绘制的调整，就会涉及到主线程的重新计算，自然会慢很多。

浏览器对事件的处理

浏览器通过对不同事件的处理来满足各种交互需求，这一部分我们一起看看从浏览器的视角，事件是什么，在此我们先主要考虑鼠标事件。

在浏览器的看来，用户的所有手势都是输入，鼠标滚动，悬置，点击等等都是。当用户在屏幕上触发诸如 touch 等手势时，首先收到手势信息的是 Browser process，不过 Browser process 只会感知到在哪里发生了手势，对 tab 内内容的处理是还是由渲染进程控制的。

事件发生时，浏览器进程会发送事件类型及相应的坐标给渲染进程，渲染进程随后找到事件对象并执行所有绑定在其上的相关事件处理函数。

事件从浏览器进程传送给渲染进程

前文中，我们提到过合成器可以独立于主线程之外通过合成栅格化层平滑的处理滚动。如果页面中没有绑定相关事件，组合器线程可以独立于主线程创建组合帧。如果页面绑定了相关事件处理器，主线程就不得不出来工作了。这时候合成器线程会怎么处理呢？

这里涉及到一个专业名词「理解非快速滚动区域（non-fast scrollable region）」由于执行 JS 是主线程的工作，当页面合成时，合成器线程会标记页面中绑定有事件处理器的区域为 non-fast scrollable region ，如果存在这个标注，合成器线程会把发生在此处的事件发送给主线程，如果事件不是发生在这些区域，合成器线程则会直接合成新的帧而不用等到主线程的响应。

涉及 non-fast scrollable region 的事件，合成器线程会通知主线程进行相关处理

web 开发中常用的事件处理模式是事件委托，基于事件冒泡，我们常常在最顶层绑定事件：

 document.body.addEventListener('touchstart', event=> {
     if (event.target===area) {
         event.preventDefault();
     }
 });

上述做法很常见，但是如果从浏览器的角度看，整个页面都成了 non-fast scrollable region 了。

这意味着即使操作的是页面无绑定事件处理器的区域，每次输入时，合成器线程也需要和主线程通信并等待反馈，流畅的合成器独立处理合成帧的模式就失效了。

由于事件绑定在最顶部，整个页面都成为了 non-fast scrollable region

为了防止这种情况，我们可以为事件处理器传递 passive: true 做为参数，这样写就能让浏览器即监听相关事件，又让组合器线程在等等主线程响应前构建新的组合帧。

 document.body.addEventListener('touchstart', event=> {
     if (event.target===area) {
         event.preventDefault()
     }
  }, {passive: true});

不过上述写法可能又会带来另外一个问题，假设某个区域你只想要水平滚动，使用passive: true 可以实现平滑滚动，但是垂直方向的滚动可能会先于event.preventDefault()发生，此时可以通过 event.cancelable 来防止这种情况。

 document.body.addEventListener('pointermove', event=> {
     if (event.cancelable) {
         event.preventDefault(); // block the native scroll
         /*
         *  do what you want the application to do here
         */
     } 
 }, {passive: true});

也可以使用 css 属性 touch-action 来完全消除事件处理器的影响，如：

 #area { 
   touch-action: pan-x; 
 }

查找到事件对象

当组合器线程发送输入事件给主线程时，主线程首先会进行命中测试（hit test）来查找对应的事件目标，命中测试会基于渲染过程中生成的绘制记录（ paint records ）查找事件发生坐标下存在的元素。

主线程依据绘制记录查找事件相关元素事件的优化

一般我们屏幕的刷新速率为 60fps，但是某些事件的触发量会不止这个值，出于优化的目的，Chrome 会合并连续的事件 (如 wheel, mousewheel, mousemove, pointermove, touchmove )，并延迟到下一帧渲染时候执行。

而如 keydown, keyup, mouseup, mousedown, touchstart, 和 touchend 等非连续性事件则会立即被触发。

Chrome 会合并连续事件到下一帧触发

合并事件虽然能提示性能，但是如果你的应用是绘画等，则很难绘制一条平滑的曲线了，此时可以使用 getCoalescedEvents API 来获取组合的事件。示例代码如下：

 window.addEventListener('pointermove', event=> {
     const events=event.getCoalescedEvents();
     for (let event of events) {
         const x=event.pageX;
         const y=event.pageY;
         // draw a line using x and y coordinates.
     }
 });

花了好久来整理上面的内容，整理的过程收获还挺大的，也希望这篇笔记能对你有所启发，如果有任何疑问，欢迎一起来讨论。

言

javascript 是一门单线程的语言，在同一个时间只能做完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再去执行后面的任务。作为浏览器端的脚本语言，javascript 的主要功能是用来和用户交互以及操作 dom。假设 javascript 不是单线程语言，在一个线程里我们给某个 dom 节点增加内容的时候，另一个线程同时正在删除这个 dom 节点的内容，则会造成混乱。

由于 js 单线程的设计，假设 js 程序的执行都是同步。如果执行一些耗时较长的程序，例如 ajax 请求，在请求开始至请求响应的这段时间内，当前的工作线程一直是空闲状态， ajax 请求后面的 js 代码只能等待请求结束后执行，因此会导致 js 阻塞的问题。

javascript 单线程指的是浏览器中负责解释和执行 javascript 代码的只有一个线程，即为 js 引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

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

一、异步 & 同步

为解决上述类似上述 js 阻塞的问题，js 引入了同步和异步的概念。

1、什么是同步？

“同步”就是后一个任务等待前一个任务结束后再去执行。

2、什么是异步？

“异步”与同步不同，每一个异步任务都有一个或多个回调函数。webapi 会在其相应的时机里将回调函数添加进入消息队列中，不直接执行，然后再去执行后面的任务。直至当前同步任务执行完毕后，再把消息队列中的消息添加进入执行栈进行执行。

异步任务在浏览器中一般是以下：

网络请求
计时器
DOM 监听事件
...

二、什么是执行栈(stack)、堆(heap)、事件队列(task queue)？

1、执行栈

“栈”是一种数据结构，是一种线性表。特点为 LIFO，即先进后出（last in, first out）。

利用数组的 push 和 shift 可以实现压栈和出栈的操作。

在代码运行的过程中，函数的调用会形成一个由若干帧组成的栈。

function foo(b) {
  let a=10;
  return a + b + 11;
}

function bar(x) {
  let y=3;
  return foo(x * y);
}

console.log(bar(7))

上面代码最终会在控制台打印42,下面梳理一下它的执行顺序。

console.log 函数作为第一帧压入栈中。
调用 bar，第二帧被压入栈中。帧中包含着 bar 的变量对象。
bar 调用 foo，foo 做一位第三帧被压入栈中，帧中包含着 foo 的变量对象。
foo 执行完毕然后返回。被弹出栈。
bar 执行完毕然后返回，被弹出栈。
log 函数接收到 bar 的返回值。执行完毕后，出栈。此时栈已空。

2、堆

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

堆和栈的区别

首先，stack 是有结构的，每个区块按照一定次序存放，可以明确知道每个区块的大小；heap 是没有结构的，数据可以任意存放。因此，

stack 的寻址速度要快于 heap。

其次，每个线程分配一个 stack，每个进程分配一个 heap，也就是说，stack 是线程独占的，heap 是线程共用的。

此外，stack 创建的时候，大小是确定的，数据从超过这个大小，就发生 stack overflow 错误，而 heap 的大小是不确定的，

需要的话可以不断增加。

public void Method1()
{
    int i=4;

    int y=2;

    class1 cls1=new class1();
}

上面代码这三个变量和一个对象实例在内存中的存放方式如下。

从上图可以看到，i、y和cls1都存放在stack，因为它们占用内存空间都是确定的，而且本身也属于局部变量。但是，cls1指向的对象实例存放在heap，因为它的大小不确定。作为一条规则可以记住，所有的对象都存放在heap。

接下来的问题是，当Method1方法运行结束，会发生什么事？

回答是整个stack被清空，i、y和cls1这三个变量消失，因为它们是局部变量，区块一旦运行结束，就没必要再存在了。而heap之中的那个对象实例继续存在，直到系统的垃圾清理机制（garbage collector）将这块内存回收。因此，一般来说，内存泄漏都发生在heap，即某些内存空间不再被使用了，却因为种种原因，没有被系统回收。

3、事件队列和事件循环

队列是一种数据结构，也是一种特殊的线性表。特点为 FIFO，即先进先出（first in, first out）

利用数组的 push 和 pop 可实现入队和出队的操作。

事件循环和事件队列的维护是由事件触发线程控制的。

事件触发线程线程同样是由浏览器渲染引擎提供的，它会维护一个事件队列。

js 引擎遇到上文所列的异步任务后，会交个相应的线程去维护异步任务，等待某个时机，然后由事件触发线程将异步任务对应的回调函数加入到事件队列中，事件队列中的函数等待被执行。

js 引擎在执行过程中，遇到同步任务，会将任务直接压入执行栈中执行，当执行栈为空（即 js 引擎线程空闲）， 事件触发线程 会从事件队列中取出一个任务（即异步任务的回调函数）放入执行在栈中执行。

执行完了之后，执行栈再次为空，事件触发线程会重复上一步的操作，再从事件队列中取出一个消息，这种机制就被称为 事件循环 （Event Loop）机制。

为了更好地理解Event Loop，请看下图（转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》）。

例子代码：

console.log('script start')

setTimeout(()=> {
  console.log('timer 1 over')
}, 1000)

setTimeout(()=> {
  console.log('timer 2 over')
}, 0)

console.log('script end')

// script start
// script end
// timer 2 over
// timer 1 over

模拟 js 引擎对其执行过程：

第一轮事件循环：

console.log 为同步任务，入栈，打印“script start”。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在1秒后加入将回调加入事件队列）。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在4ms之内将回调加入事件队列）。出栈。
console.log 为同步任务，入栈，打印"script end"。出栈。

此时，执行栈为空，js 引擎线程空闲。便从事件队列中读取任务，此时队列如下：

第二轮事件循环

js 引擎线程从事件队列中读取 cb2 加入执行栈并执行，打印”time 2 over“。出栈。

第三轮事件循环

js 引擎从事件队列中读取 cb1 加入执行栈中并执行，打印”time 1 over“ 。出栈。

注意点：

上面，timer 2 的延时为 0ms，HTML5标准规定 setTimeout 第二个参数不得小于4（不同浏览器最小值会不一样），不足会自动增加，所以 "timer 2 over" 还是会在 "script end" 之后。

就算延时为0ms,只是 time 2 的回调函数会立即加入事件队列而已，回调的执行还是得等到执行栈为空时执行。

四、宏任务 & 微任务

在 ES6 新增 Promise 处理异步后，js 执行引擎的处理过程又发生了新的变化。

看代码：

console.log('script start')

setTimeout(function() {
    console.log('timer over')
}, 0)

Promise.resolve().then(function() {
    console.log('promise1')
}).then(function() {
    console.log('promise2')
})

console.log('script end')

// script start
// script end
// promise1
// promise2
// timer over

这里又新增了两个新的概念， macrotask （宏任务）和 microtask （微任务）。

所有的任务都划分到宏任务和微任务下：

macrotask : script 主代码块、setTimeout、setInterval、requestAnimationFrame、node 中的setimmediate 等。
microtask : Promise.then catch finally、MutationObserver、node 中的process.nextTick 等。

js 引擎首先执行主代码块。

执行栈每次执行的代码就是一个宏任务，包括任务队列（宏任务队列）中的。执行栈中的任务执行完毕后，js 引擎会从宏任务队列中去添加任务到执行栈中，即同样是事件循环的机制。

当在执行宏任务遇到微任务 Promise.then 时，会创建一个微任务，并加入到微任务队列中的队尾。

微任务是在宏任务执行的时候创建的，而在下一个宏任务执行之前，浏览器会对页面重新渲染（task >> render >> task（任务队列中读取））。同时，在上一个宏任务执行完成后，页面渲染之前，会执行当前微任务队列中的所有微任务。

所以上述代码的执行过程就可以解释了。

js 引擎执行 promise.then 时，promise1、promise2 被认为是两个微任务按照代码的先后顺序被加入到微任务队列中，script end执行后，栈空。

此时当前宏任务（script 主代码块）执行完毕，并不从当前宏任务队列中读取任务。而是立马清空当前宏任务所产生的微任务队列。将两个微任务依次放入执行栈中执行。执行完毕，打印 promise1、promise2。栈空。 此时，第一轮事件循环结束。

紧接着，再去读取宏任务队列中的任务，time over 被打印。栈空。

因此，宏任务和微任务的执行机制如下：

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

async & await

因为,async 和 await 本质上还是基于 Promise 的封装，而 Promise 是属于微任务的一种。所以使用 await 关键字与 Promise.then 效果类似：

setTimeout(_=> console.log(4))

async function main() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

main()

console.log(2)
// 1
// 2
// 3
// 4

async 函数在 await 之前的代码都是同步执行的，可以理解为 await 之前的代码都属于 new Promise 时传入的代码，await 之后的所有代码都是 Promise.then 中的回调，即在微任务队列中。

五、总结

js 单线程实际上时解释执行 js 代码的只有一个线程，但是浏览器的渲染是多线程的。
异步和同步的概念与区别，异步任务有哪些。
栈、堆、队列的特点和使用场景。
事件队列以及事件循环机制。
es6 下，宏任务与微任务的执行过程。

参考：

JavaScript 异步与事件循环
并发模型与事件循环
微任务、宏任务与Event-Loop
JavaScript 运行机制详解：再谈Event Loop
JS事件循环
[译] 深入理解 JavaScript 事件循环（二）— task and microtask
Help, I'm stuck in an event-loop

原文作者:大芒果哇

原文地址:https://www.cnblogs.com/shenggao/p/13799566.html

向目标

目标：有道翻译接口参数
主页：https://fanyi.youdao.com/
接口：https://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule
逆向参数：
- Form Data：
  - salt: 16261583727540
  - sign: 151e4b19b07ae410e0e1861a6706d30c
  - bv: 5b3e307b66a6c075d525ed231dcc8dcd

逆向过程

抓包分析

我们在有道翻译页面随便输入文字，可以看到没有刷新页面，翻译结果就出来了，由此可以推断是 Ajax 加载的，打开开发者工具，选择 XHR 过滤 Ajax 请求，可以看到有一条 URL 为 https://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule 的 POST 请求，当我们输入“测试”的时候，他返回的数据类似于如下结构：

{
    "translateResult": [
        [{
            "tgt": "test",
            "src": "测试"
        }]
    ],
    "errorCode": 0,
    "type": "zh-CHS2en",
    "smartResult": {
        "entries": ["", "[试验] test\r\n", "measurement\r\n"],
        "type": 1
    }
}

translateResult 是翻译的结果，smartResult 是智能推荐的其他翻译，那么这个 URL 就是我们需要的翻译接口了。

由于是 POST 请求，我们观察它的 Form Data：

i：待翻译的字符串；
from：待翻译的语言；
to：目标语言；
lts：时间戳；
smartresult 、client、doctype、version、keyfrom：固定值；
action：实时翻译 FY_BY_REALTlME、手动点击翻译 FY_BY_CLICKBUTTION；
salt、sign、bv 的值每次会改变，需要进一步分析。

参数逆向

salt、sign、bv 三个加密参数，全局搜索任意一个，搜索结果比较多，依次对比，可以发现 fanyi.min.js 文件第 8969 行左右开始，Form Data 所有的参数都齐全了，埋下断点调试一下，可以看到所有数据和最终结果一致，加密的四个参数都在 r 当中取值，跟踪 r，往上找可以看到 r=v.generateSaltSign(n);，其中 n 是输入的待翻译的字符串：

继续跟进 generateSaltSign 函数，点击跳转到 r 函数，这里可以看到关键的加密代码：

var r=function(e) {
    var t=n.md5(navigator.appVersion)
      , r="" + (new Date).getTime()
      , i=r + parseInt(10 * Math.random(), 10);
    return {
        ts: r,
        bv: t,
        salt: i,
        sign: n.md5("fanyideskweb" + e + i + "Y2FYu%TNSbMCxc3t2u^XT")
    }
};

分析这段关键加密代码：

navigator.appVersion 就是 UserAgent
bv 的值由 UserAgent 经过 MD5 加密得到
ts 的值为 13 位时间戳
salt 的值由 ts 的值加上一个 0-9 的随机整数得到
sign 的值由待翻译的字符串、salt 的值和另外两个固定的字符串组成，再由 MD5 加密得到最终结果

这个过程比较简单，可以直接使用 Python 来复现：

import time
import random
import hashlib


query="待翻译字符串"
user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"

lts=str(int(time.time() * 1000))                                # 以毫秒为单位的 13 位时间戳
salt=lts + str(random.randint(0, 9))                            # 13 位时间戳+随机数字，生成 salt 值
sign="fanyideskweb" + query + salt + "Y2FYu%TNSbMCxc3t2u^XT"    # 拼接字符串组成 sign
sign=hashlib.md5(sign.encode()).hexdigest()                     # 将 sign 进行 MD5 加密，生成最终 sign 值
bv=hashlib.md5(user_agent.encode()).hexdigest()                 # 对 UA 进行 MD5 加密，生成 bv 值

或者直接引用 JS，使用 nodejs 里面的加密模块 CryptoJS 来进行 MD5 加密，改写 JS 如下：

// 引用 crypto-js 加密模块
var CryptoJS=require('crypto-js')

function getEncryptedParams(data, ua) {
    var bv=CryptoJS.MD5(ua).toString()
        , lts="" + (new Date).getTime()
        , salt=lts + parseInt(10 * Math.random(), 10)
    var sign=CryptoJS.MD5('fanyideskweb'+data+salt+']BjuETDhU)zqSxf-=B#7m').toString()
    return {bv: bv, lts: lts, salt: salt, sign: sign}
}

完整代码

youdao_encrypt.js

获取加密参数 salt、sign、bv：

// 引用 crypto-js 加密模块
var CryptoJS=require('crypto-js')

function getEncryptedParams(data, ua) {
    var bv=CryptoJS.MD5(ua).toString(),
        lts="" + (new Date).getTime(),
        salt=lts + parseInt(10 * Math.random(), 10)
    var sign=CryptoJS.MD5('fanyideskweb' + data + salt + ']BjuETDhU)zqSxf-=B#7m').toString()
    return { bv: bv, lts: lts, salt: salt, sign: sign }
}

// var ua="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
// var data="测试"
// console.log(getEncryptedParams(data, ua));

youdaofanyi.py

在线咨询

上一篇：display：none 与 visibility：
下一篇：有哪些可以提高效率的网页版工具，是你不知道的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商