浏览器事件循环(事件轮询)

已于 2024-01-15 12:08:29 修改
阅读量1.7k 收藏 26
点赞数 49
分类专栏： 前端面试相关 文章标签： 前端 vue.js javascript 事件循环 事件轮询
于 2024-01-15 10:05:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Robinwang1128/article/details/135594408
版权

浏览器事件循环(事件轮询)

文章目录

1.浏览器事件循环流程

浏览器事件循环（Browser Event Loop）是浏览器用于处理用户输入、网络请求、渲染和其他异步事件的机制。这个循环确保了 JavaScript 代码的执行是非阻塞的，允许浏览器同时处理多个任务，从而提高用户体验。以下是浏览器事件循环的详细说明：

  1. 调用栈： 当一个 JavaScript 脚本开始执行时，它会被放入调用栈。调用栈是一个数据结构，用于跟踪执行上下文（函数调用）的堆栈。

  2. 同步任务： 在调用栈中的代码是同步任务，它们会按照执行的顺序逐一执行。如果有函数调用，它们会被压入调用栈，直到执行完成。

  3. 异步任务触发： 当浏览器遇到异步任务，例如定时器、事件监听器、网络请求等，它会将这些任务放入任务队列中。

  4. 任务队列： 任务队列是一个先进先出（FIFO）的数据结构，用于存储异步任务。有多个任务队列，其中包括宏任务队列和微任务队列）。

    • 宏任务队列： 包括 DOM 操作、用户交互事件、定时器等。宏任务完成后，会将一个新的同步任务放入调用栈。

    • 微任务队列： 包括 Promise 回调、MutationObserver 回调等。微任务会在当前宏任务执行完成后、下一个宏任务执行前执行。

  5. 事件循环（Event Loop）： 当调用栈为空时，事件循环开始工作。它会检查宏任务队列，如果有任务，将任务推入调用栈执行。执行完毕后，再检查微任务队列，如果有微任务，将其依次推入调用栈执行。这个过程会一直重复，形成一个循环。

    • 宏任务执行： 从宏任务队列中选择一个任务，执行完毕后，再选择下一个宏任务。

    • 微任务执行： 在宏任务执行完毕后，依次执行微任务队列中的所有任务。

这个事件循环的机制确保了 JavaScript 的异步执行，同时避免了阻塞主线程。这对于处理用户交互、网络请求等异步任务是非常重要的，以确保应用程序的响应性和性能。

2.同步任务、异步任务、宏任务和微任务概念

同步任务：

同步任务是按照它们被调用的顺序依次执行的任务，一个接一个地在调用栈中运行。在执行同步任务时，JavaScript 引擎会一直等待任务执行完毕，然后才继续执行下一个任务。

console.log('Task 1');
console.log('Task 2');
console.log('Task 3');
// ...
异步任务：

异步任务是不会阻塞后续代码执行的任务。它们将在将来的某个时间点执行，可以是由浏览器环境触发的事件，也可以是由开发者手动触发的异步操作。

// 异步任务示例：定时器
setTimeout(function() {
  console.log('1000ms');
}, 1000);

// 异步任务示例：事件监听器
document.addEventListener('click', function() {
  console.log('点击');
});
宏任务：

宏任务是由浏览器环境提供的任务，包括 I/O 操作、渲染、事件处理等。在事件循环的每一轮中，只会执行一个宏任务。常见的宏任务包括 setTimeout、setInterval、DOM 操作、AJAX 请求等。

// 宏任务示例：setTimeout
setTimeout(function() {
  console.log('2000ms');
}, 2000);

// 宏任务示例：AJAX 请求
fetch('https://api.abc.com/data')
  .then(response => response.json())
  .then(data => console.log('AJAX'));
微任务：

微任务是在当前宏任务执行完毕后、下一个宏任务执行前触发的任务。它们有着更高的优先级，会在宏任务中的异步操作之前执行。常见的微任务包括 Promise 的回调、MutationObserver 等。

// 微任务示例：Promise
Promise.resolve().then(function() {
  console.log('微任务1');
});

// 微任务示例：MutationObserver
const observer = new MutationObserver(function() {
  console.log('微任务2');
});

observer.observe(document.body, { attributes: true });

document.body.setAttribute('class', 'some-class');

在事件循环中，首先执行当前调用栈中的同步任务，然后检查并执行宏任务队列中的一个宏任务，接着执行微任务队列中的所有微任务。这个过程会一直重复，确保了 JavaScript 引擎的异步执行和非阻塞特性。

3.宏任务和微任务区别

宏任务和微任务都是异步任务的一种，但它们之间存在一些区别。

异步任务的分类：

  1. 宏任务： 包括整体的代码、setTimeout、setInterval、AJAX 请求、DOM 操作等。宏任务会在当前调用栈执行完毕后，从宏任务队列中取出一个任务执行。

  2. 微任务： 包括 Promise 的回调、MutationObserver、process.nextTick 等。微任务会在当前宏任务执行完毕后、下一个宏任务执行前触发，且微任务会在宏任务中的异步操作之前执行。

异步任务执行顺序：
  1. 执行同步任务，按照代码顺序逐一执行。
  2. 执行当前宏任务，从宏任务队列中取出一个任务执行。
  3. 执行微任务队列中的所有微任务。
  4. 重复步骤 2 和 3，直到宏任务队列为空。
console.log('同步 1');

// 宏任务
setTimeout(function() {
  console.log('宏任务 1');

  // 微任务
  Promise.resolve().then(function() {
    console.log('微任务 1');
  });
}, 0);

// 宏任务
setTimeout(function() {
  console.log('宏任务 2');

  // 微任务
  Promise.resolve().then(function() {
    console.log('微任务 2');
  });
}, 0);

console.log('同步 2');
//同步 1
//同步 2
//宏任务 1
//微任务 1
//宏任务 2
//微任务 2

在上面的示例中，同步任务（同步1、同步2）首先执行，然后是两个宏任务（宏任务1、宏任务2）。在每个宏任务执行后，会依次执行微任务（微任务1、微任务2）。这种执行顺序确保了微任务比宏任务更具优先级，微任务会在下一个宏任务之前执行。

  1. 首先，执行同步代码，输出 ‘同步 1’ 和 ‘同步 2’。
  2. 然后，两个 setTimeout 中的回调函数被分别添加到宏任务队列。
  3. 接着，执行微任务队列中的任务，即两个 Promise 的回调函数。输出 ‘微任务 1’ 和 ‘微任务 2’。
  4. 再次回到宏任务队列，执行第一个 setTimeout 的回调函数，输出 ‘宏任务 1’。在这个宏任务中，又产生了一个微任务，即 Promise 的回调函数，输出 ‘微任务 1’。
  5. 继续执行宏任务队列，执行第二个 setTimeout 的回调函数，输出 ‘宏任务 2’。同样，在这个宏任务中，产生了一个微任务，即 Promise 的回调函数，输出 ‘微任务 2’。

微任务总是在当前宏任务执行完毕后、下一个宏任务执行前执行。微任务 1 和 微任务 2 在它们所属的宏任务（setTimeout 的回调函数）执行完毕后才得以执行。

ps:

new Promise((resolve, reject) => {
  console.log("fn12");
  resolve();
  new Promise((resolve, reject) => {
  console.log("fn13");
  resolve();
  new Promise((resolve, reject) => {
  console.log("fn14");
  resolve();
  }).then(function () {
  console.log("fn15");
  });
  }).then(function () {
  console.log("fn16");
  });
  }).then(function () {
  console.log("fn17");
  });
//fn12
//fn13
//fn14
//fn15
//fn16
//fn17
  1. 首先，console.log("fn12"); 执行，立即输出 fn12。
  2. 然后，第一个 Promise 解决 (resolve())。但由于其 .then() 部分（包含 console.log("fn17");）被放置在最外层，所以它将在整个 Promise 链被解析之后才执行。
  3. 接下来，代码进入第二个 Promise，并执行 console.log("fn13");，立即输出 fn13。
  4. 第二个 Promise 被解决。但是，其 .then() 部分（包含 console.log("fn16");）同样需要等待更内层的 Promise 解决才执行。
  5. 然后，代码进入第三个 Promise，并执行 console.log("fn14");，立即输出 fn14。
  6. 第三个 Promise 被解决，其 .then() 部分（包含 console.log("fn15");）被放置在微任务队列中，并准备执行。

同步代码执行完毕，事件循环开始处理微任务队列：

  1. 首先执行第三个 Promise 的 .then() 回调，输出 fn15。
  2. 接下来是第二个 Promise 的 .then() 回调，输出 fn16。
  3. 最后执行第一个 Promise 的 .then() 回调，输出 fn17。

这个顺序的关键是理解 Promise 的 .then() 部分是如何被放置在微任务队列中的，以及它们是如何根据嵌套结构被逐一解决的。每个 .then() 只有在其相应的 Promise 被解决后才会被放入队列，且内层的 Promise 必须在外层的 Promise 之前解决。因此，虽然 fn17 是第一个 .then() 的回调，但它被放置在微任务队列中的顺序实际上是在 fn15 和 fn16 之后。

4.Vue中涉及事件循环

在Vue.js中，事件循环主要涉及到Vue实例的生命周期、响应式数据的更新、以及Vue异步操作的处理。

  1. Vue生命周期钩子：

    • Vue实例在创建、挂载、更新、销毁等阶段都有对应的生命周期钩子函数。
    • 这些生命周期钩子函数在特定的时机被触发，它们在事件循环中的执行顺序受到影响，从而影响Vue实例的行为。
    • 例如，在created生命周期钩子中，Vue实例已经创建，但尚未挂载到DOM中。在这个阶段，可以进行一些异步操作，这些异步操作会在事件循环的下一个周期中执行。

  2. 数据更新响应：

    • Vue的响应式系统通过数据的变化来触发视图的更新。
    • 当数据发生变化时，Vue会通过事件循环的微任务队列将更新操作推送到队列中，然后在当前任务执行完成后立即执行微任务队列中的更新操作。
    • 这保证了数据更新的响应性，同时避免了在同一个任务中频繁地进行DOM更新，提高了性能。

  3. Vue.nextTick方法：

    • Vue.nextTick是Vue提供的一个工具方法，用于在DOM更新后执行回调函数。
    • 在某些场景下，比如修改了数据但想要立即获取更新后的DOM状态，可以使用Vue.nextTick来确保在下一次事件循环中执行回调。
    • 这是因为DOM更新是异步的，Vue.nextTick会将回调函数推送到微任务队列中，确保在DOM更新后执行。

  4. 异步组件加载：

    • Vue支持异步组件加载，通过import语法实现。当使用异步组件时，组件的加载是异步的。
    • 异步组件的加载过程涉及到事件循环，确保在组件加载完成后才会进行渲染。
    • 这有助于提高应用的性能，避免一开始就加载所有组件，而是按需加载。

  5. Vue异步操作：

    • 在Vue中，一些异步操作，比如$nextTick、$set等，都涉及到事件循环的概念。
    • 通过这些异步操作，Vue能够在下一个事件循环周期中执行一些需要等待的任务，以确保在适当的时机进行DOM更新或其他操作。

5.$nextTick

在Vue中，一个经典的例子是使用this.$nextTick来确保在DOM更新完成后执行一些操作。这在处理DOM更新的时候非常有用，特别是当需要获取更新后的DOM状态时。

假设有一个按钮，点击按钮后触发显示一个Element UI的Modal对话框，并且想在Modal对话框显示后获取它的某些属性，例如宽度。

<template>
  <div>
    <el-button @click="showModal">显示Modal</el-button>
    <el-dialog :visible.sync="dialogVisible" title="我是一个Dialog">
      <!-- Modal 内容 -->
      <!-- ... -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      modalWidth: null
    };
  },
  methods: {
    showModal() {
      this.dialogVisible = true;

      // 此时 Modal 还未渲染到 DOM 上
      console.log('Modal 尚未渲染到 DOM 上，此时宽度为：', this.modalWidth);

      // 使用 $nextTick 来确保在下一次事件循环中执行回调
      this.$nextTick(() => {
        // 此时 Modal 已经渲染到 DOM 上
        this.modalWidth = this.$refs.dialog.$el.clientWidth;
        console.log('Modal 已渲染到 DOM 上，宽度为：', this.modalWidth);
      });
    }
  }
};
</script>

当按钮被点击时，showModal方法会设置dialogVisible为true，显示Modal。然后使用this.$nextTick来确保在下一次事件循环中执行回调函数，这个回调函数用于获取Modal对话框的宽度。通过这种方式，能够确保在Modal渲染到DOM上后再去获取其属性，避免了在Modal还未渲染完成时就尝试获取其属性的问题。

狐说狐有理
关注
  • 49
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
php开发客服系统(持久连接+轮询+反向ajax) - php严程序
08-19
php开发客服系统。真正的实时聊天，使用持久连接+轮询+反向ajax实现 用户端(可直接给客户发送消息) 客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式： 一：iframe + 服务器推技术comet(反向ajax,即服务器向浏览器推送数据) 二：ajax持久连接 + 长轮询 客服端采用第一种方式:iframe + 服务器推技术 思路： 1：新建comentbyiframe.php 该用文件使用while(true)一直连接到服务器不断开. 如果在while的过程中查到了新数据.使用ob_flush推给apache服务器.apache再用flush推给浏览器. 2：新建html页面,插入一个iframe. 该iframe的src为comentbyiframe.php。 并隐藏iframe。comentbyiframe.php获取的数据用js输出到父窗口中的某个函数.该函数把信息追加到指定的聊天窗口中 3：只要客户端收到用户发来的数据. 就显示为"xx对你说..". 客服端只要点击用户名。即可给该用户发送数据. 用户端采用第二种方式：ajax持久连接 + 长轮询 ajax持久连接：文档加载完毕后(或其他时机)，使用ajax请求一个php文件 被请求的php文件通过while(true)循环.迟迟不给apache返回数据的目的. 轮询指：请求服务器的时候.如果服务器没有数据.则一直等.当服务器有数据后.就返回给客户端. 这样请求、响应过后就完成了一次HTTP请求. 还没完.客户端收到数据后又到服务器要数据.这就是轮询 就好像一个乞丐一样. 不给他钱，他就一直跟着你要. 你给他钱以后.他还不满足，又跑来找你要. 实现思路： 进入用户端后.如果没有用户名.使用setcookie设置一个用户名.然后通过ajax持久连接. 不停向服务器索要数据(即客服发送给该用户的记录). 详情：http://www.phpyan.com/home/article/350.html
浏览器事件循环js事件循环node事件循环基础理解
u013107033的博客
06-13 247
文章目录1.浏览器的事件循环MacroTaskMicroTask执行顺序2.JavaScript中的的事件循环MacroTaskMicroTask代码执行顺序3.NodeJs的事件循环执行过程参考资料 JavaScript语言的一大特点就是单线程，为了提升cpu的利用率（很多时候CPU是闲着的，因为IO操作很慢，如Ajax操作从网络读取数据，就不得不等着结果出来，再往下执行）因此任务可以区分为两种： 任务类型 解释 同步任务（synchronous） 在主线程（执行栈）上排队执行的任务，只
浏览器事件循环
weixin_59357486的博客
06-21 133
事件循环—— 单线程是异步产生的原因， 事件循环时异步的实现方式。
浏览器事件循环（event loop）
最新发布
qq_40658616的博客
03-08 1539
在以往的event loop中 渲染进程会把消息队列分为宏任务队列和微任务队列根据w3c的最新解释因为现在的浏览器复杂程度 两个队列并不能解决现在复杂的场景，从而抛弃了宏任务队列并允许有很多个队列（每个浏览器必须有一个微任务队列这个队列优先级最高，其他的次之每个浏览器对除微任务队列以为的权重各有不同），并在浏览器的源码上每个任务都有一个任务类型，根据类型分配到对应的队列同一个类型的任务必须分配同一个队列里。在目前的chrome浏览器至少包含了 微队列（最高），交互队列（高），计时队列（中）
chrmoe 浏览器Tab页定时轮播插件（最新版 1.0）
03-26
原生插件，可以直接拖拽安装 安装完成之后，地址栏右侧会出现个小图标 。这个插件会自动轮播当前打开的所有 chrome tab 页，默认轮播间隔为 15s。 开启轮播功能：点击这个 icon，这时候 icon 上会冒出个小叉 关闭轮播功能：再次点击这个 icon，icon 变回 置轮播间隔：右键点击 插件图标，点击「选项」菜单，进入设置页面
PHP+纯JS 视频轮询循环播放 php视频循环播放 js 视频循环播放
08-31
适合在后台构建服务器，电视机装浏览器直接播放，奶茶店大屏，视频方便更换
浏览器 - 事件循环机制详解
qq_40147756的博客
08-16 1462
浏览器进程模型，渲染主线程，事件循环
浏览器的事件循环机制（Event loop）
Azbtt的博客
12-14 1261
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
浏览器的事件循环机制
weixin_42440314的博客
10-01 5744
一、事件循环 要想在线程运行过程中，能接收并执行新的任务，就需要采用事件循环机制，如果需要接收其他进程发送来的任务需要引入消息队列 渲染进程的主线程和子线程之间是子线程将任务添加到消息队列。 其他进程发送来的任务是渲染进程的I/O线程接收其他进程的消息，然后添加到消息队列，由主线程的事件循环系统执行。 消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。 消息队列的内容为宏任务，每一个宏任务都会有一个自己的微任务队列，执行完一个宏任务之后不会马上去执行下一个宏任务，而且是查看微任务队列中是否有要执
浏览器事件循环与vue nextTicket的实现
10-17
主要介绍了浏览器事件循环（结合vue nextTicket）的实现方法,需要的朋友可以参考下
自动浏览器 单次或循环访问批量网页
07-27
本自动浏览器的功能： 单次或循环访问批量网页 可以手动修改文件autobrowser\bin\Debug\urls.xml来修改网址。 1 //组名 nathen //链接名 http://hi.baidu.com/nathen //网站地址 a a http://126.com a a http://163.com
关于B/S判断浏览器断开的问题讨论
01-19
客户端通过脚本和服务器保持请求，每次请求刷新一个时间，服务器检查这个时间，如果发现时间超过预定，则可以判断该客户端浏览器已关闭。然后对进行相应得操作。如果你想知道是那个客户端浏览器关闭，可以把会话绑定到轮询对象中。长连接不是所有服务器都支持得，这种方式，比你的现实多了。我的个人看法。我首先同意这几种做法，它们也能实现这个需求，他们都通过客户端的轮询，更新服务器的最后访问时间，让服务器检测超时。我来谈谈我对这2种做法的理解1 服务器端如何进行超时判断，启动一个后台线程进行定时轮询？循环检查每个session是否超过了间隔？2 如果用线程，那么服务器端判断的间隔或者周期是多少，1秒，10秒，20秒
浏览器的事件循环
略略略
09-25 151
什么是事件循环 JavaScript 有一个特点就是异步单线程，异步就是同时干不同的事，单线程就是只有一个线程可以做事，而 js 实现这一点就是通过事件循环来实现，本文只讨论浏览器端的事件循环，暂不涉及 Node 的事件循环。 前置知识 在具体了解事件循环之前，我们先了解一些必要的内容，帮助我们更好的理解事件循环。 执行栈（call stack） 函数调用栈，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，
【浏览器事件循环】
qq_41779826的博客
04-15 496
前端 ，javascript ,浏览器事件循环
浏览器事件循环机制
断线的风筝
08-12 2165
在JS中，有些任务是异步的，他们不需要立刻执行，所以它们在刚刚被派发时，并不具备进入调用栈的“资格”，只能排队等待。于是这些待执行的任务就会按照一定的规则排队，等待着被推入调用栈的时刻到来——这个队列，就叫做。首先被推入调用栈的是全局上下文，也可以理解为是js代码块作为一个宏任务进入了诶调用栈，这个动作同时创建了全局上下文；根据上述规则，整个代码依次输出为1、5、10、6、2、3、4、7、8、9。如果有一堆需要被执行的逻辑，它首先需要被推入函数调用栈，后续才能被执行。执行完毕后，就结束了所有任务的处理。..
浏览器的事件循环（Event Loop）
ing的博客
09-02 466
浏览器事件循环
如何理解浏览器事件循环?
weixin_48082900的博客
11-19 411
事件循环的执行流程
浏览器和nodejs事件循环
07-28
浏览器和 Node.js 都有事件循环，但在实现上有一些差异。 浏览器的事件循环是基于浏览器的单线程执行模型。它使用一个事件队列来管理异步任务和事件处理。当浏览器遇到异步操作（例如网络请求或定时器）时，它会将回调函数放入事件队列中，然后继续执行同步代码。一旦同步代码执行完成，浏览器就会开始处理事件队列中的回调函数，并按照顺序执行它们。 Node.js 的事件循环也是基于单线程的执行模型，但它使用了不同的架构，称为 libuv。Node.js 事件循环的核心是事件循环阶段和轮询阶段。在事件循环阶段，Node.js 执行计划的回调函数，例如定时器、IO 等待、或者进程间通信。在轮询阶段，Node.js 会检查是否有新的 IO 事件需要处理，如果有，则执行相关的回调函数。如果没有 IO 事件需要处理，Node.js 将等待新的事件到来。 总体而言，浏览器和 Node.js 的事件循环都用于管理异步任务和事件处理，但在实现细节上有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狐说狐有理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值