likes
comments
collection
share

浏览器 - 事件循环，一篇文章学明白

作者站长头像
站长
· 阅读数 22

事件循环

提炼总结：

  • 单线程是一部异步产生的原因
  • 事件循环是异步的实现方式

浏览器的进程模型

何为进程？

程序运行需要有自己专属的内存空间，可以把这块内存空间简单理解为进程

浏览器 - 事件循环，一篇文章学明白

何为线程？

  • 有了进程后，就可以运行程序的代码了。
  • 运行代码的人称之为：线程
  • 一个进程至少有一个线程，所以在进程开启后会自动船舰一个线程来运行代码，改线程称之为主线程。
  • 如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个进程。

浏览器 - 事件循环，一篇文章学明白

浏览器有哪些进程和线程？

浏览器是一个多进程、多线程的应用程序。

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，他会自动启动多个进程。

浏览器 - 事件循环，一篇文章学明白

可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

  1. 浏览器进程 主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
  2. ⽹络进程 负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。
  3. 渲染进程（本节课重点讲解的进程） 渲染进程启动后，会开启⼀个渲染主线程，主线程负责执⾏ HTML、 CSS、JS 代码。 默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的标签⻚之间不相互影响。将来该默认模式可能会有所改变，有兴趣的同学可参⻅ chrome官⽅说明⽂档。

渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

  • 解析 HTML
  • 解析 CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把⻚⾯画 60 次
  • 执⾏全局 JS 代码
  • 执⾏事件处理函数
  • 执⾏计时器的回调函数
  • ......

思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了⼀个前所未有的难题：如何调度任 务？ ⽐如：

我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候⽤户点击了按钮，我该⽴即 去执⾏点击事件的处理函数吗？ 我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候某个计时器到达了时间，我 该⽴即去执⾏它的回调吗？ 浏览器进程通知我“⽤户点击了按钮”，与此同时，某个计时器也到达了时 间，我应该处理哪⼀个呢？ ...... 渲染主线程想出了⼀个绝妙的主意来处理这个问题：排队

浏览器 - 事件循环，一篇文章学明白

  1. 在最开始的时候，渲染主线程会进⼊⼀个⽆限循环
  2. 每⼀次循环会检查消息队列中是否有任务存在。如果有，就取出第⼀个任务 执⾏，执⾏完⼀个后进⼊下⼀次循环；如果没有，则进⼊休眠状态。
  3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任 务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务这样⼀来，就可以让每个任务有条不紊的、持续的进⾏下去了

整个过程，被称之为事件循环（消息循环）

若干解释

何为异步？

代码在执⾏过程中，会遇到⼀些⽆法⽴即处理的任务，⽐如：

  • 计时完成后需要执⾏的任务 —— setTimeout 、 setInterval
  • ⽹络通信完成后需要执⾏的任务 -- XHR 、 Fetch
  • ⽤户操作后需要执⾏的任务 -- addEventListener 如果让渲染主线程等待这些任务的时机达到，就会导致主线程⻓期处于 「阻塞」的状态，从⽽导致浏览器「卡死」

浏览器 - 事件循环，一篇文章学明白

渲染主线程承担着极其重要的⼯作，⽆论如何都不能阻塞！

因此，浏览器选择异步来解决这个问题

浏览器 - 事件循环，一篇文章学明白

使⽤异步的⽅式， 渲染主线程永不阻塞

⾯试题：如何理解 JS 的异步？ 参考答案： (1) JS是⼀⻔单线程的语⾔，这是因为它运⾏在浏览器的渲染主线程中，⽽渲染主线程只有⼀个。 (2) ⽽渲染主线程承担着诸多的⼯作，渲染⻚⾯、执⾏ JS 都在其中运⾏。 如果使⽤同步的⽅式，就极有可能导致主线程产⽣阻塞，从⽽导致消息队列中的很多其他任务⽆法得到执⾏。这样⼀来，⼀⽅⾯会导致繁忙的主线程⽩⽩的消耗时间，另⼀⽅⾯导致⻚⾯⽆法及时更新，给⽤户造成卡死现象。 (3) 所以浏览器采⽤异步的⽅式来避免。具体做法是当某些任务发⽣时，⽐如计 时器、⽹络、事件监听，主线程将任务交给其他线程去处理，⾃身⽴即结束任务的执⾏，转⽽执⾏后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加⼊到消息队列的末尾排队，等待主线程调度执⾏。在这种异步模式下，浏览器永不阻塞，从⽽最⼤限度的保证了单线程的流畅运⾏。

JS为何会阻碍渲染？

<h1>Mr.Yuan is awesome!</h1>  
<button>change</button>  
<script>  
    var h1 = document.querySelector('h1');  
    var btn = document.querySelector('button');  
// 死循环指定的时间  
  function delay(duration) {  
    var start = Date.now();  
    while (Date.now() - start < duration) {}  
  }  
   btn.onclick = function () {  
    h1.textContent = '袁⽼师很帅！ ';  
    delay(3000);  
  };  
</script>

浏览器 - 事件循环，一篇文章学明白

由于设置了h1的内容后，浏览器需要重新渲染才能看到最新内容，但是此时主线程正在执行settimeout （3s）等待任务，无法执行重渲染任务，就会出现卡顿了3s 的现象。

任务有优先级吗？

任务没有优先级，在消息队列中先进先出 但消息队列是有优先级的

根据W3C的最新解释：

  • 每个任务都有⼀个任务类型，同⼀个类型的任务必须在⼀个队列，不同类型 的任务可以分属于不同的队列 . 在⼀次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执 ⾏。

  • 必须准备好⼀个微队列，微队列中的任务优先所有其他任务执⾏ html.spec.whatwg.org/multipage/w… erform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升， W3C 不再使⽤宏队列的说法

在⽬前 chrome 的实现中，⾄少包含了下⾯的队列：

  • 延时计时器到达后的回调任务，优先级「中」
  • 交互⽤户操作后产⽣的事件处理任务，优先级「⾼」
  • 微队列：用户存放需要最快执行的任务，优先级「最⾼」

添加任务到微队列的主要⽅式主要是使⽤ Promise、 MutationObserver 例如： 浏览器还有很多其他的队列，由于和我们开发关系不⼤，不作考虑

⾯试题：阐述⼀下 JS 的事件循环  
// ⽴即把⼀个函数添加到微队列  
Promise.resolve().then(函数)  
参考答案：  
事件循环⼜叫做消息循环，是浏览器渲染主线程的⼯作⽅式。  
在 Chrome 的源码中，它开启⼀个不会结束的 for 循环，每次循环从消息  
队列中取出第⼀个任务执⾏，⽽其他线程只需要在合适的时候将任务加⼊到  
队列末尾即可。  
过去把消息队列简单分为宏队列和微队列，这种说法⽬前已⽆法满⾜复杂的  
浏览器环境，取⽽代之的是⼀种更加灵活多变的处理⽅式。  
根据 W3C 官⽅的解释，每个任务有不同的类型，同类型的任务必须在同⼀  
个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，  
在⼀次事件循环中，由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须  
有⼀个微队列，微队列的任务⼀定具有最⾼的优先级，必须优先调度执⾏。 


⾯试题： JS 中的计时器能做到精确计时吗？为什么？  
参考答案：  
不⾏，因为：  
1. 计算机硬件没有原⼦钟，⽆法做到精确计时  
2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调⽤的  
是操作系统的函数，也就携带了这些偏差  
3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，  
则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时⼜带来  
了偏差  
4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运⾏，因此  
⼜带来了偏

代码分析案例

浏览器 - 事件循环，一篇文章学明白

分析步骤：

  • 渲染进程执行全局js代码
  • 任务按照不同类型加入不同的消息队列排队
  • 任务优先级：微队列 > 延时队列 > 交互队列 （ 不同类型的队列执行优先级有浏览器自定义决定 ）
  • 主线程任务执行完成后，按照优先级扫描队列中的任务
  • 然后提取到主线程执行，直到主线程、所有队列中的任务清空，主线程进入休眠模式，等待被唤醒

拓展

浏览器是如何体现：‘多线程多进程’设计架构的？

谷歌浏览器的“多线程多进程”架构体现在它的整体设计中，这个架构旨在提高浏览器的性能、稳定性和安全性。以下是谷歌浏览器多线程多进程架构的主要体现：

1. 多进程架构：

  • 每个标签页一个进程： 谷歌浏览器通常为每个打开的标签页创建一个单独的进程。这意味着每个标签页都在自己独立的进程中运行，相互隔离，一个标签页的问题不会导致整个浏览器的崩溃。这提高了浏览器的稳定性。
  • 多个辅助进程： 除了每个标签页的进程外，还存在一些辅助进程，用于处理浏览器的不同功能，例如渲染进程、插件进程、GPU进程等。这些进程的存在有助于提高性能和安全性，同时充分利用多核处理器。

2. 多线程架构：

  • 主线程： 每个标签页的进程通常包括一个主线程，负责管理标签页的生命周期、用户输入、页面导航等。主线程还与浏览器的界面交互。
  • 渲染线程： 每个标签页的进程包括一个或多个渲染线程，负责解析和渲染网页的HTML、CSS和JavaScript。这些线程将网页内容转换为可视化的图像，以便显示在屏幕上。
  • 网络线程： 网络线程用于处理与网页加载相关的网络请求，包括获取网页的HTML、CSS、JavaScript文件，以及从服务器请求图像、视频、数据等资源。
  • JavaScript引擎线程： JavaScript引擎线程用于执行网页上的JavaScript代码，通常使用V8引擎来解释和执行JavaScript。
  • 合成线程： 合成线程负责将不同层级的页面元素合成到一个屏幕上，以创建最终的可视化输出。这包括图层叠加、动画效果等。
  • 其他线程： 除了上述线程，还有其他线程用于处理各种任务，如文件下载、插件运行、定时器等。

这些线程在一个标签页的进程内协同工作，以确保网页的正常加载、交互和渲染。多线程架构允许浏览器同时处理多个任务，提高了性能和响应速度。同时，多进程架构确保了不同标签页之间的隔离，提高了浏览器的稳定性和安全性。

总之，谷歌浏览器的多线程多进程架构是为了在保持浏览器的稳定性和安全性的同时提供出色的性能，这是现代浏览器的关键设计之一。

一个谷歌浏览器标签页表示一个进程，那一个进程里面是否还分成不同的线程呢？

回答： 是的，每个谷歌浏览器标签页通常表示一个单独的进程，并且在这个进程内部，会分成不同的线程来执行各种任务。这是谷歌浏览器的多进程多线程架构的一部分。

在一个浏览器标签页的进程中，通常包括以下主要线程：

  1. 主线程（Main Thread）： 主线程负责管理和控制整个标签页的生命周期，处理用户输入，以及与浏览器界面的交互。它还负责渲染用户界面，响应鼠标点击、键盘输入等用户操作。
  2. 渲染线程（Rendering Thread）： 渲染线程负责将网页内容转换为可视化的图像，即渲染网页。它会处理HTML、CSS、JavaScript的解析和渲染，以及绘制网页上的元素。
  3. 网络线程（Network Thread）： 网络线程用于处理与网页加载相关的网络请求，包括获取HTML、CSS、JavaScript文件，以及从服务器请求图像、视频、数据等资源。
  4. JS引擎线程（JavaScript Engine Thread）： JS引擎线程负责执行网页上的JavaScript代码。浏览器通常使用V8引擎来解释和执行JavaScript。
  5. 合成线程（Compositor Thread）： 合成线程用于将不同层级的页面元素合成到一个屏幕上，以创建最终的可视化输出。这包括图层叠加、动画效果等。
  6. 定时器线程（Timer Thread）： 定时器线程负责处理网页中的定时器，以确保定时任务按计划执行。
  7. 其他线程： 标签页的进程还可以包括其他线程，用于处理特定任务，如文件下载、插件运行等。

这些线程在标签页的进程内协同工作，以确保网页的正常加载、交互和渲染。这种多线程架构可以提高浏览器的性能和响应速度，允许同时处理多个任务，以满足用户的需求。同时，多进程架构确保了不同标签页之间的隔离，一个标签页的问题不会影响其他标签页和整个浏览器的稳定性。