关于javascript:事件循环-eventloop

过程线程

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

过程 线程

浏览器的过程

浏览器的渲染流程

浏览器内核

宏工作，微工作

过程线程