浏览器原理-事件循环
浏览器的进程模型
何为进程？
程序运行需要有专属的内存空间，这块内存空间可以简单理解为进程。
每个应用至少有一个进程，进程之间相互独立。即使要通信，也需要双方同意。
何为线程？
有了进程后，就需要线程来执行程序。
一个进程至少有一个线程，所以进程开启后会自动创建一个线程来运行代码，该线程为主线程。
主线程可以启动更多的线程来同时执行多块代码。
浏览器有哪些进程和线程？
浏览器是一个多进程多线程的应用程序。
主要的进程有：
-
浏览器进程
负责界面显示、用户交互、子进程管理等。 -
网络进程
负责加载网络资源。 -
渲染进程
默认情况下，浏览器会为每一个标签页开启一个渲染进程。
渲染进程启动后，会开启一个渲染主线程，负责执行html、css、js代码
渲染主线程是如何工作的？
渲染主线程处理的任务：
- 解析html、css
- 计算样式
- 布局
- 处理图层
- 每秒显示页面60次
- 执行全局js代码
- 执行事件处理函数
- 执行计时器的回调函数
浏览器调度任务的逻辑：排队(消息队列)
- 在最开始的时候, 渲染主线程会进入无限循环
- 每一次循环会检查消息队列中是否有任务存在. 如果有,就取出第一个任务执行; 如果没有, 则进入休眠状态
- 其他所有线程可以随时向消息队列的末尾添加任务. 如果主线程是休眠状态, 则会唤醒以继续循环拿取任务
其他细节问题
何为异步？
JS是一门单线程的语言, 这是因为它运行再浏览器的渲染主线程中, 而主线程只有一个, 其承担着很多的工作
如果使用同步的方式, 代码在执行过程中, 会遇到一些无法立即处理的任务, 比如说:
- 计时完成后再执行的任务
- 网络通信完成后再执行的任务
- 用户操作后再执行的任务
如果让主线程等待这些任务的时机达到, 就会导致主线程长期处于[阻塞]状态, 从而导致浏览器卡死
理解异步:
-
当渲染主线程遇到计时器、网络、事件监听等任务时，将其交给其他线程处理，自身立即结束任务的执行，转而执行事件循环，从消息队列中拿取下一个任务进行执行。
-
当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
通过使用异步的方式, 主线程永不阻塞
JS为何会阻碍渲染？
var h1 = document.querySelector('h1');
var btn = document.querySelector('button');
function delay(duration) {
var start = Date.now();
while (Date.now() - start < duration) {}
}
btn.onclick = function() {
h1.textContent = '回调成功';
delay(3000);
}
- 渲染主线程执行JS代码
- 交互线程监听点击事件, 将任务对象传给消息队列
- 主线程执行了回调函数, 改变文本内容, 此时渲染更新任务被加入消息队列
- 主线程执行延时3秒, 再从消息队列拿取任务, 更新DOM
任务有优先级吗？
- 任务没有优先级, 在消息队列里先进先出
- 每个任务都有一个任务类型, 同一个类型的任务必须在一个队列, 不同类型的任务可以分属于不同的队列
- 在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行
- 多个消息队列有优先级
- 浏览器必须准备好一个微队列, 微队列中的任务优先所有其他任务执行
目前在 Chrome 的实现中, 至少包含了下面的队列:
- 微队列: 用户存放需要最快执行的任务, 优先级「最高」 (Promise)
- 交互队列: 用于存放用户操作后产生的事件处理任务, 优先级「高」
- 延时队列: 用于存放计时器到达后的回调任务, 优先级「中」
