事件循环
浏览器的进程模型
进程
程序运行需要有自己专属的内存空间，这块空间可以简单理解为进程。
为什么需要专属的内存空间？（好处）
- 防止程序相互干扰
- 安全防护机制：恶意程序访问、程序错误导致系统崩溃
- 访问权限控制，如可读、可写、可执行等
- 多线程独立执行
- 动态内存分配
- 执行环境统一，使程序行为可预测、调试
线程
有线程后可以运行程序代码
运行代码的人被称为线程
所以一个进程至少有一个线程，进程开启后会自动创建一个线程来运行代码，这个线程为主线程。
主线程结束，则程序结束
程序需要同时执行多块代码时，主线程会启动更多线程执行代码，所以一个进程中可以包含多线程。
浏览器的进程和线程
浏览器是一个多线程多进程的应用程序
浏览器内部工作极其复杂，为了避免相互影响，减少浏览器崩溃概率，在浏览器启动后，它会自动启动多个进程。
主要有以下三个：
- 浏览器进程
- 网络进程
- 渲染进程
浏览器进程：负责界面展示、用户交互、子进程管理等
界面展示：导航栏、标签页等
用户交互：点击事件、键盘事件等
子进程管理：网络进程和渲染进程由浏览器进程启动
网络进程：负责加载网络资源。网络进程内部会启动多个线程处理不同网络任务
渲染进程：渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS、JS代码
同时，浏览器会为每个标签页开辟一个新的渲染进程，以保证标签页之间不会相互影响。
渲染主线程如何工作
渲染主线程需要处理的任务包括但不限于：
- 解析HTML
- 解析CSS
- 计算样式
- 布局
- 处理图层
- 执行全局JS代码
- 执行事件处理函数
- 执行计时器回调函数
为什么需要渲染主线程处理？
如何调度任务？
简单来说一句话解决：排队
- 最开始的时候，渲染主线程会进入一个无限循环
for(;;)。 - 每次循环会检查消息队列中是否有任务存在。如果有，取出第一个任务执行，执行完后进入下一次循环。如果没有，进入休眠状态。
- 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务加到消息队列队尾。添加新任务时，主线程如果休眠，则会将其唤醒从而继续循环拿取任务。
这个过程，被称为事件循环（消息循环）
异步是什么？
代码执行过程中，会有部分无法立即处理的任务：
-
计时完成后需要执行的任务 --
setTimeout -
网络通信完成后需要执行的任务
-
用户操作后需要执行的任务 --
addEventListener
这些任务如果要同步执行，那么主线程会长期导致堵塞，从而导致浏览器卡死
渲染主线程承担极其重要的工作，无论如何都不能阻塞
因此，浏览器选择异步解决问题：
使用异步方式，渲染主线程永不堵塞
如何理解JS的异步？
JS是一门单线程语言，因为他是运行在浏览器的渲染主线程中，渲染主线程只有一个。
而渲染主线程本身承担非常重要的工作，如果使用同步代码，就有可能导致主线程产生阻塞，从而导致消息队列中其他任务无法得到执行，一方面会导致繁忙的主线程一直消耗时间，另一方面导致页面无法及时刷新，导致浏览器卡死。
为了防止这种情况发生，浏览器使用异步的方式进行处理。当某些任务发生时，如计时器、网络、事件监听等，主线程会将其交给其他线程处理，自身立即从消息队列中提取新的任务来进行执行。当其他线程完成时，会将回调函数会包装成任务，加入到消息队列队尾，等待主线程调度执行。
这种异步的模式下，浏览器永不阻塞。
任务有优先级吗？
任务没有优先级，在消息队列中先进先出
但是消息队列有优先级
目前每一个任务都有一个任务类型，相同类型的任务必须放入同一个消息队列，不同类型的任务可以放入不同队列
每次事件循环中，浏览器可以根据实际情况从不同队列中取出任务执行
浏览器必须准备好一个微队列，微队列中的任务优先于其他队列任务执行
目前chrome中，至少包含以下三个队列：
- 延时队列 -- 存放计时器到达的回调任务，优先级 中
- 交互队列 -- 存放用户操作后产生的事件处理任务，优先级 高
- 微队列 -- 用户存放需要最快执行的任务，优先级 最高
添加任务到微队列的主要方式是使用Promise
// 立即把一个函数添加到微队列
Promise.resolve().then(函数)