事件循环 eventloop

最新推荐文章于 2023-04-10 14:09:44 发布

mahongqin

最新推荐文章于 2023-04-10 14:09:44 发布

阅读量685

点赞数 1

分类专栏： Node 系列文章标签： javascript js

本文链接：https://blog.csdn.net/Hiraku_Ma/article/details/108201623

版权

Node 系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

进程线程

CPU 分配资源的最小单位是进程，同一个时间内单个 CPU 只能运行一个进程，单个 CPU 一次只能运行一个任务
CPU 调度的最小单位是线程，一个进程里面包含多个线程。
可以看看阮老师的这篇文章，进程与线程的一个简单解释

浏览器的进程

浏览器主进程
- 负责界面展示，用户交互，子进程管理，文件存取等
插件进程
GPU 进程
- 3d绘制
网络进程
渲染进程
- 主要负责将 HTML, CSS, JavaScript 转换为用户可交互的网页，排版引擎 Blink 和
- JavaScript 引擎 V8 就运行在渲染进程，默认每个 tab 一个渲染进程
- 浏览器内核

浏览器的渲染流程

解析 HTML 文件，生成 DOM tree；同时解析 CSS 文件以及样式元素中的样式数据，生成 CSS Rules
构建 render tree：根据 DOM tree 和 CSS Rules 来构建 render tree，它可以让浏览器按照正确的顺序绘制内容
布局（layout / reflow）：计算各元素尺寸、位置。
绘制（paint）：绘制页面像素信息。
浏览器将各层信息发送给 GPU，GPU 将各层信息合成（composite），显示在屏幕上。

浏览器内核

GUI 渲染线程
JS 引擎线程
- JavaScript 是单线程的
- GUI 渲染线程与 JS 引擎线程是互斥的
- JS 阻塞页面加载
事件触发线程
定时触发器线程
异步 http 请求线程

宏任务，微任务

事件轮询解释：事件轮询-阮一峰
JS 单线程
- 单线程中如果同步执行的代码很慢，会让其它程度等待很长时间，这是同步阻塞。
- 多线程会占用多倍的资源也会浪费多倍的资源，也不合理。
- event_loop 是把需要等待的程序放到异步队列，主调用函数执行完之后监听，再执行异步队列，整个过程就是个不断的循环
- JS 引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件环（Event Loop）”
宏任务宿主环境提供的异步方法都是宏任务 script，ui 渲染，setTimeout，setInterval、setImmediate
微任务语言标准提供 promise，mutationObserver，process.nextTick，Object.observe(已废弃)
默认先执行 script 脚本中的代码 -> 会清空微任务（将所有的微任务全部执行完） -> 渲染页面 -> 取出一个宏任务执行 -> 执行完毕后会再次情空微任务…

在这里插入图片描述

浏览器黄色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- script是一个宏任务 -->
  <script>
    document.body.style.background = 'red';
    console.log(1);
    // 在 setTimeout 执行前 会触发一次渲染
    Promise.resolve().then(()=>{
      console.log(2);
      document.body.style.background = 'yellow';
    });
    console.log(3);
  </script>
</body>
</html>

按钮事件执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="button">点我啊</button>
  <script>
    button.addEventListener('click', ()=>{
        console.log('listener1');
        Promise.resolve().then(()=>console.log('micro task1'));
    });
    button.addEventListener('click', ()=>{
        console.log('listener2');
        Promise.resolve().then(()=>console.log('micro task2'));
    });
    // 点击按钮之后的顺序
    // listener1
    // micro task1
    // listener2
    // micro task2

    // 一个个的函数来取 每次执行完 会先处理当前定义的微任务
    button.click(); // click1() click2()
    // listener1 listener2 micro task1 micro task2
  </script>
</body>
</html>

promise 和 setTimeout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    Promise.resolve().then(() => {
      console.log('Promise1')
      setTimeout(() => {
        console.log('setTimeout2');
      }, 0);
    });
    
    setTimeout(() => {
      console.log('setTimeout1');
      Promise.resolve().then(() => {
        console.log('Promise2');
      });
    }, 0);
    // Promise1 setTimeout1 Promise2 setTimeout2
  </script>
</body>
</html>

执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>
    console.log(1);
    async function async () {
      console.log(2);
      await console.log(3); // Promise.resolve(console.log(3)).then(console.log(4))
      console.log(4);
    }
    setTimeout(() => {
      console.log(5);
    }, 0);
    const promise = new Promise((resolve, reject) => {
      console.log(6); // new Promise 代码会立即执行
      resolve(7);
    })
    promise.then(res => { // 第一个微任务
      console.log(res)
    });
    async (); 
    console.log(8);
    // 1 6 2 3 8 7 4 5
  </script>
</body>
</html>

执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>
    console.log('script start');

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

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

    console.log('script end');

    // script start
    // script end
    // promise1
    // promise2
    // setTimeout
  </script>
</body>
</html>

一段变态的代码

  // 1 7 6 8
  console.log('1');
  setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
      console.log('3');
    });
    new Promise(function(resolve) {
      console.log('4');
      resolve();
    }).then(function() {
      console.log('5')
    });
  }, 0);
  process.nextTick(function() {
    console.log('6');
  });
  new Promise(function(resolve) {
    console.log('7');
    resolve();
  }).then(function() {
    console.log('8')
  });

  setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    });
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    });
  }, 0);

mahongqin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件循环 eventloop

进程线程CPU 分配资源的最小单位是进程，同一个时间内单个 CPU 只能运行一个进程，单个 CPU 一次只能运行一个任务CPU 调度的最小单位是线程，一个进程里面包含多个线程。可以看看阮老师的这篇文章，进程与线程的一个简单解释浏览器的进程浏览器主进程负责界面展示，用户交互，子进程管理，文件存取等插件进程GPU 进程3d绘制网络进程渲染进程主要负责将 HTML, CSS, JavaScript 转换为用户可交互的网页，排版引擎 Blink 和JavaScript
复制链接

扫一扫