事件轮询机制详解

dn_666666

已于 2023-05-30 22:32:43 修改

阅读量773

点赞数

文章标签：开发语言 javascript 前端

于 2023-05-30 16:06:55 首次发布

本文链接：https://blog.csdn.net/lmk666__/article/details/130935691

版权

进程与线程

进程：cpu资源分配的最小单位，是拥有资源和独立运行的最小单位，执行程序时，会创建一个进程，cpu为其分配资源，并加入进程就绪队列

线程：cpu调度的最小单位，是程序执行的最小单位

进程与线程的关系：线程是在进程基础上建立一次程序运行单位，一个进程可以有多个线程。个进程间相互独立，同个进程中的线程共享资源。

浏览器是多进程的，浏览器进程包括：

Browser进程，浏览器的主控线程，只有一个，负责浏览器界面显示，与用户交互，管理各个页签和其他进程网络资源。

第三方插件进程，插件打开时创建一个进程。

GPU进程，最多一个，用于3D绘制。

浏览器渲染进程（浏览器内核或Renderer进程），一个页签打开就是一个进程，多个空白页签合并为一个进程

浏览器渲染进程又有以下线程：

js引擎线程，js内核，解析处理JavaScript脚本，运行代码，一个页签只有一个。

图形用户界面GUI渲染线程，用于解析html，css，构建DOM树和RenderObject树，布局，绘制。当界面需要重绘或者某种操作引发回流时执行。与js引擎线程互斥，在js引擎线程执行是GUI被挂起并保存到队列中，直到js引擎线程空闲时立即执行，防止渲染前后数据不一致，因此若js引擎执行时间过长，会导致页面渲染加载阻塞。

事件触发线程，属于浏览器而不是js引擎，用于处理事件循环。当鼠标点击、异步请求或者执行setTimeout的代码块时，将对应任务添加到事件线程中，等待js引擎空闲时处理。

定时触发器线程，setInterval与setTimeout所在的线程，用于计数，计数完成后将任务添加到事件触发线程中，因此记完数后并非立刻执行任务，这个数只是最小的延时时间，若js引擎线程未空闲需要继续等待。w3c在html标准中规定，要求setTimeout中低于4ms的时间间隔算为4ms。

异步http请求线程，在XMLHTTPRequest连接后通过浏览器开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，由js引擎执行

对于非常耗时的工作会导致js执行过长时间而阻塞页面，可以使用web worker向浏览器申请开一个子线程。

Web Worker：在构造时接受一个JavaScript文件的url（包含要在worker中运行的代码），它运行在与当前windows不同的另一个全局上下文中，该线程属于浏览器，不操作dom，只负责计算。主线程与worker通过postMessage相互通讯

宏任务与微任务

任务可以分为两种：

宏任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务

微任务：不进入主线程，进入”微任务列表“的任务

宏任务（Macrotasks）包括：

script全部代码（同步代码也属于宏任务）

setTimeout

setInterval

setImmediate

微任务（Microtasks）包括：

Promise

MutationObserver

不同类型的任务，会进入对应的Event Quenue，比如setTimeout和setInterval会进入相同的任务队列，由定时触发器线程管理执行。

事件轮询

JavaScript 是单线程的，同一时间只能做一件事。所有任务都需要排队，前一个任务结束，才会执行后一个任务（JavaScript 是一门单线程语言，Event Loop 是 JavaScript 的执行机制）

1、所有任务都在主线程上执行，形成一个执行栈

2、在主线程之外还存在一个任务队列，系统把异步任务放到任务队列中，然后主线程继续执行后续的任务

3、一旦执行栈中的所有任务（包括微任务）执行完毕，系统会读取任务队列，如果此时异步任务结束了等待状态，就会从任务队列进入执行栈，恢复执行（宏任务是一个一个执行）

4、主线程不断重复上面的第三部

任务队列遵循先进先出原则，微任务队列中的任务在一个宏任务执行完成后会全部执行，如果在执行微任务过程中产生新的微任务，该任务会放到微任务队列的最后等待执行

宏任务在等待的过程中不会进入宏任务队列，而是由各自的线程管理，如果宏任务进入就绪状态才会进入宏任务队列，等待前一个宏任务执行完毕后执行

Promise.resolve()
  .then(function() {
    console.log("promise0"); // 2 执行微任务1 Promise1
  })
  .then(function() {
    console.log("promise5"); // 4 执行微任务3 Promise3
  });
 
setTimeout(() => {
  console.log("timer1"); // 5 执行宏任务 setTimeout1
  Promise.resolve().then(function() {
    console.log("promise2"); // 6 执行宏任务中的微任务
  });
  Promise.resolve().then(function() {
    console.log("promise4"); // 7 执行宏任务中的微任务
  });
}, 0);
 
setTimeout(() => {
  console.log("timer2"); // 8 执行宏任务 setTimeout2
  Promise.resolve().then(function() {
    console.log("promise3"); // 9 执行宏任务中的微任务
  });
}, 0);
 
Promise.resolve().then(function() {
  console.log("promise1"); // 3 执行微任务2 Promise2
});
 
console.log("start"); // 1 执行同步代码

执行结果：start ------ promise0 ------ promise1 ------ promise5 ------ timer1 ------ promise2 ------ promise4 ------ timer2 ------ promise3

async、await 在事件轮询中的执行时机

async 隐式返回 Promise，会产生一个微任务

await 后面的代码，在执行微任务时执行

console.log("script start"); // 1 同步代码
 
async function async1() {
  await async2(); // 2 同步代码
  console.log("async1 end"); // 5 这里的执行时机：在执行微任务时执行
}
 
async function async2() {
  console.log("async2 end");
}
 
async1();
 
setTimeout(function() {
  console.log("setTimeout"); // 8 第二个宏任务
}, 0);
 
new Promise(resolve => {
  console.log("Promise"); // 3 同步代码
  resolve();
})
  .then(function() {
    console.log("promise1"); // 6 微任务
  })
  .then(function() {
    console.log("promise2"); // 7 微任务
  }); 
 
console.log("script end"); // 4 同步代码

执行结果：script start ------ async2 end ------ Promise ------ script end ------ async1 end ------ promise1 ------ promise2 ------ setTimeout

浏览器刷新周期和事件轮询

页面渲染理想状态的每一帧都遵循上图顺序执行，但是在同一帧中如果时间足够可以执行多个宏任务；如果宏任务执行周期过长，requestAnimationFrame,ui rendering ,requestIdleCallback也会被推迟到下一帧执行。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #outer{
        height: 200px;
        width: 400px;
        background-color: beige;
    }
    #inner{
        height: 200px;
        width: 200px;
        background-color: gray;
    }
</style>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>
<script>
    const $inner = document.querySelector("#inner")
    const $outer = document.querySelector("#outer")
    function handler(){
        console.log('click');
        for(let i = 0; i < 1000000000; i++){}
        Promise.resolve().then(_ => console.log('promise'))

        setTimeout(_ => console.log('timeout' + Math.random(1)))

        requestAnimationFrame(_ => console.log('animationFram' + Math.random(1)))

        $outer.style.backgroundColor = 'red'
    }
    new MutationObserver(_ => {
        console.log('observer');
    }).observe($outer, {
        attributes: true
    })
    $outer.addEventListener('click', handler)
    $inner.addEventListener('click', handler)
</script>
</html>

执行结果：

click=> promise=> observer=> click=>promise=> animationFram0.043034458316079105=>animationFram0.17426477751975633=> timeout0.01372362864575094=> timeout0.8429032530829081

由于for循环占用大量时间，所以一个宏任务执行将ui渲染的方法推迟执行，然后再执行其他两个宏任务

注意：时间冒泡是微任务，所以第二个handler方法在第一个方法中的setTimeout前执行

dn_666666

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
事件轮询机制详解

cpu资源分配的最小单位，是拥有资源和独立运行的最小单位，执行程序时，会创建一个进程，cpu为其分配资源，并加入进程就绪队列：cpu调度的最小单位，是程序执行的最小单位：线程是在进程基础上建立一次程序运行单位，一个进程可以有多个线程。个进程间相互独立，同个进程中的线程共享资源。浏览器是多进程的，浏览器进程包括：，浏览器的主控线程，只有一个，负责浏览器界面显示，与用户交互，管理各个页签和其他进程网络资源。，插件打开时创建一个进程。，最多一个，用于3D绘制。
复制链接

扫一扫