关于javascript:事件循环-eventloop

41次阅读

共计 4181 个字符，预计需要花费 11 分钟才能阅读完成。

过程 线程

  • 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);

正文完
javascript
发表至： javascript
2020-08-24
 0
前戏，啥是像素？
关于javascript:Angular之父为什么怼React
打造前端团队的-React-CLI-工具
elementui-表格打印