【事件循环】

进程

程序运行需要有专属的内存空间,可以把这块内存空间简单理解为进程.
每个应用至少拥有一个进程,进程之间相互独立,即使要通信也需要双方同意.

线程

一个进程至少有一个线程, 所以开启一个进程之后会自动创建一个线程来运行代码

浏览器有哪些进程和线程

浏览器是一个多进程多线程的应用程序 (浏览器进程,网络进程,渲染进程…)

渲染进程

启动后,开启一个渲染主线程,主线程负责执行 HTML、CSS、JS 代码
(默认情况下浏览器会为每个标签页开启一个新的渲染进程,以保证不同标签页之间互不影响)

渲染主线程如何工作?

主线程主要工作内容

解析HTML
解析CSS
计算样式
布局
图层处理
每秒把页面画60次
执行全局JS代码
执行事件处理函数
执行计时器的回调函数
…
思考: 为啥渲染进程不多开几个线程来处理这些事情???

如何调度这些任务?

• 最开始的时候,渲染主线程会进入一个无限循环
• 每一次循环会检查消息队列中是否有任务存在,如果有则取出第一个执行,执行完之后进入下一个循环;如果没有则进入休眠状态
• 其他线程(其他进程的线程) 可以随时向消息队列中添加任务.新任务添加到消息队列末尾,在添加新任务时 如果主线程是休眠状态 则唤醒主线程继续循环拿取任务
• 整个过程就是事件循环或者称为消息循环

何为异步?

在代码执行的过程中会遇到一些无法立即处理的任务,比如:

• 计时器完成后需要执行的任务 setTimeout setInterval
• 网络通信完成后需要执行的任务 xhr fetch
• 用户操作后需要执行的任务 addEventListener

使用异步的方式主线程用不阻塞

如何理解JS的异步?

• js是一门单线程的语言: 因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个.
• 渲染主线程又承担着许多的工作,比如执行js 、渲染页面啊…
• 如果采用同步的方式,极有可能使主线程产生阻塞,从而导致消息队列中的任务无法得倒执行,这样一来会导致繁忙的主线程白白消耗时间,另一方面页面无法更新,给用户造成卡死的现象
• 所以浏览器采用异步的方式来避免: 具体做法是当某些任务发生时候,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续的代码.当其他线程完成时,将事先传递的回调函数包装成任务,加到消息队列的末尾,等待主线程调度执行.
• 在这种异步模式下,浏览器永不阻塞,从而保证了单线程的流程运行

js为何会阻碍渲染?

    <div>替换前</div>
    <button>替换</button>
    <script>
        const el = document.getElementsByTagName('div')[0]
        const btn = document.getElementsByTagName('button')[0]

        function delay (duration) {
            const start = Date.now();
            while(Date.now() - start < duration){}
        }

        btn.onclick = function () {
            el.innerHTML = '替换后';
            delay(3000)
        }
    </script>

代码执行流程大致如下:

任务有优先级吗?

任务没有优先级 先进先出
但消息队列有优先级

w3c 最新解释:
每个任务都有一个任务类型,同一个类型的任务必须在同一个队列,不同类型的任务可分属不同的队列.在一次事件循环中,浏览器可根据实际情况从不同队列中取出任务执行.
浏览器必须准备好一个微队列,微队列中的任务优先所有其他任务执行
随着浏览器的复杂度急剧提升,W3C不在使用宏队列的说法

在chrome的实现中至少包含以下队列:
延时队列 用于处理计时到底后的回调任务 优先级[中]
交互队列 用于存放用户操作后产生的事件处理任务 优先级[高]
微队列 需要最快执行的任务 优先级[最高]

添加任务到微队列的方式主要有Promise、MutationObserver

Promise.resolve().then('函数')

总结

• 事件循环又称为消息循环是浏览器渲染主线程的工作方式
• 在chrome源码中,它会开启一个不会结束的 for 循环,每次循环都会从消息队列中取第一个执行, 而其他线程需要在合适的时候将任务添加到消息队列末尾即可
• 过去简单的把消息队列分为宏队列和微队列,这种说法已经无法满足复杂的浏览器环境,取而代之的是更加灵活多变的方式
• 根据 W3C 官方解释 每个任务有不同的类型, 同一类型的任务必须在同一个队列中, 一个队列中可以拥有不同的任务类型 但是浏览器必须有一个微队列它的优先级最高