浏览器事件循环

毛毛淘气

于 2023-06-21 18:06:14 发布

阅读量136

点赞数 1

文章标签：前端 javascript chrome

本文链接：https://blog.csdn.net/weixin_59357486/article/details/131332300

版权

事件循环

单线程是异步产生的原因

事件循环时异步的实现方式

浏览器进程模式

何为进程？

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

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意

何为线程？

有了进程后，就可以运行程序代码了。

运行代码的[人]称之为[线程]。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程初值为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程可以包含多个线程

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

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

浏览器内部工资极其复杂

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

其中，最主要的进程有：

浏览器进程

主要负责界面显示、用户交互、子进程管理等、浏览器进程内部会启动多个线程处理不同的任务。
网络进程

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程（重点）

渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS 、JS 代码。

默认情况下，浏览器会为每个标签开启一个新的渲染今进程，以保证不同的标签页之间不互相影响。

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

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

解析HTMl

解析CSS

计算样式

布局

处理图层

执行全局js代码

执行事件处理函数

执行计时器的回调函数

.....等等

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

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

渲染主线程处理这个问题的核心：排队

在最开始的时候，渲染主线程会进入一个无线循环
每一次循环会检查消息队列中是否有任务存在。如果有，就去除第一个任务执行，执行完成一个后进入下一次循环；如果没有，则进入休眠。
其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务，新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

这样一来，就可以让每个任务有条不紊、持续的进行下去了。

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

何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

计时完成后需要执行的任务 ——setTimeout、setinterval
网络通信完成后需要执行的任务 —— XHR、Ferch
用户操作后需要执行的任务 —— addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于阻塞的状态，从而导致浏览器卡死。

这时候异步的方式，就可以有效的处理浏览器阻塞的状态，渲染主线程永不阻塞

面试问题：如何理解JS的异步？

参考答案：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个，而渲染主线程承担着诸多的工作，渲染页面、执行js都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中其他任务无法得到运执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免浏览器阻塞。具体的做法是当某些任务发生时，比如计时器、网络请求、时间监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行转而执行后续的代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅执行。

JS为何会阻碍渲染？

先看代码：

<h1>你好呀！</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 = '123456';
    delay(3000);
  };
</script>

在执行JS代码中，比如在遇到一个btn点击事件，操作页面的样式需要重新渲染，但是这个点击事件的回调函数里面，同时也存在一个死循环，当主线程完成了全部任务后，进入休眠状态，用户点击事件，点击事件从消息队列传送到主线程，回调函数里面同时执行了操作Dom样式的代码，重新进入消息队列等待点击事件的回调函数全部执行完毕，但是点击事件的回调函数里面还有一个死循环，而消息队列的渲染任务需要等待延时器的完成才能重新渲染，这就是阻碍渲染。