1.浏览器是多进程，多线程

主要有

1. 浏览器进程
2. 网络进程
3. 渲染进程 （开启一个渲染主线程）

2.主线程的工作

1. 解析htmo
2. 解析css
3. 计算样式
4. 布局
5. 处理图层
6. ...

3主线程如何处理

事件循环

渲染主线程-> 任务....

消息队列 -> 任务1 任务2 ....

每个进程或者线程监听用户操作将任务放到消息队列等待渲染主线程执行

1. 一开始渲染主线程是无限循环
2. 每一次循环会检查是否有任务.如果有就取出第一个执行，如果没有进行休眠
3. 其他所有线程进程可以随时向消息队列添加任务。新任务添加末尾，添加时如果主渲染线程休眠会唤醒

4.关于异步

网络通信 setTimeout需要有延迟执行的过程，如果主线程执行则会造成浏览器卡死，为了解决这个问题开通了一个计时线程，渲染主线程遇到此类任务将此类任务添加至计时线程。当计算完毕添加至消息队列中。

5.js阻塞渲染

   const send = document.querySelector(".send");
      const num = document.querySelector(".num");
      function sleep(time) {
        let start = Date.now();
        while (Date.now() - start < time) {}
      }
      send.addEventListener("click", function () {
        num.innerHTML = "测试";
        sleep(4000);
      });

以上 先执行 num.innerHTML = "测试"; 内容已经变为 测试 但因为重绘 生成了新的任务排到消息队列 之后在执行sleep 函数4000秒死循环最后执行重绘任务使得达到了浏览器阻塞效果

6.任务优先级

1. 任务没有优先级，任务队列有。
2. 每个任务都有一个任务类型。同一个任务必须在一个队列里
3. 浏览器必然有一个微队列。微队列（mircrotask）优其他队列
4. 目前浏览器至少包含以下队列 1.延迟队列 （低） 延时器 2.微队列（高） 用户需要最快执行的 1.添加微队列的方式之一 Promise.resolve().then(fn) (交互队列最高)