重温js—— 事件循环

Posted 2021-09-17 twinkle||cll

js线程模式

大家都知道，js是单线程的语言。为啥要设置成单线程的呢？ 不妨大家想一想，如果js是多线程的语言，一个线程来操作删除dom，一个线程来新增dom.那么这两个谁能先完成？结果就会变得不可控制。但是这里有的人肯定会说，html5提出了workers可以来启动多线程。没错，workers是可以用于启动多线程，在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，这也是存在一些弊端的（本质上也还是单线程）。
　单线程即任务是串行的，后一个任务需要等待前一个任务的执行，这就可能出现长时间的等待。但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等，这些任务并不消耗 CPU，是一种空等，资源浪费，因此出现了异步。通过将任务交给相应的异步模块去处理，主线程的效率大大提升，可以并行的去处理其他的操作。当异步处理完成，主线程空闲时，主线程读取相应的callback，进行后续的操作，最大程度的利用CPU。此时出现了同步执行和异步执行的概念，同步执行是主线程按照顺序，串行执行任务；异步执行就是cpu跳过等待，先处理后续的任务（CPU与网络模块、timer等并行进行任务）。
　
　图1： 异步任务会在宿主环境执行好后，放入任务队列中，等待js引擎的调用

异步任务的出现，对于I/O处理的地方是非常有效的。

浏览器

浏览器可以是单进程架构也可以是多进程架构，但是一定是多线程的。我们的js代码是跑在线程上的。

界面组成

• 地址栏： 用来处理输入内容，内存分为普通字符和域名，会做不一样的事情；
• 前进，后退按钮： 用于当前窗口的前进或者后退；
• 书签选项： 用于展示保存的书签历史；
• 刷新、暂停按钮： 用于刷新及暂停当前加载文档的刷新、暂停按钮；

浏览器的界面上在主要功能上基本上是大同小异。就是由上面的那几个部分组成。

内置的主要线程

图2：chrome主要的内线程

1. JS执行引擎： 负责执行js代码
2. 渲染线程： 负责渲染页面
3. 计时器线程：负责计时
4. 事件监听 线程： 负责监听事件
5. http网络线程： 负责网络通信

浏览器架构详情查看：https://blog.csdn.net/qq_41499782/article/details/120031894

事件任务队列

队列的特征是先进先出(FIFO)first in first out与栈（FILO）是不一样的。作用是用于存放执行时机到了的异步函数。

分类

事件任务分为两大类： 宏任务( macro task)和微任务（Micro Task）

宏任务主要包含：<script>( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)等
微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)等

图3： 微任务优先宏任务出队列

微任务会比宏任务更快出队列

事件循环

事件循环是代码在执行栈中运行，然后当AO（activity object）执行的时候，如果当前的执行上下文存在异步任务，那么异步任务会调用对应的宿主环境来执行异步任务，等任务执行完毕后，会放入任务队列。等执行栈为空时候，就会执行任务队列的任务。

图4： 红色线条形成的圈，就是事件循环

案例

前面说了那么多，还不如举个例子来比较实在

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

看到上面的代码，咋们先来画个图，画一画，对自己的理解才会更加深刻。

图5： 案例1的js执行过程

通过上图，我们知道了案例得出的结果是 ： script start script end promise1 promise2 setTimeout

结果