其实在我们电脑的操作系统中，每一个运行的程序都会由自己的进程（可能是一个，也可能有多个），浏览器就是一个程序，它的运行在操作系统中，拥有一组自己的进程（主进程，渲染进程，网络进程，GPU进程....）
浏览器：各个进程之间是相互独立的（这样不会因为一个进程的问题导致其他的进程奔溃不能使用），而进程之间又是需要相互协作的。
01：主进程
管理整个的浏览器窗口（用户界面，地址栏，书签栏等等），他还负责创建和销毁渲染进程，并通过进程之间的IPC通信与渲染进程通信（管理浏览器的各个组件）
02：渲染进程
也成为页面进程，每个独立的页面都有自己的独立渲染进程（渲染引擎），进行负责解析HTML，CSS,JS，然后渲染到我们看到的视觉
★ 计时器和任务队列就是在该进程中（该进程需要和主进程之间IPC相互通讯，告诉主进程需要执行那些任务）
03：网络进程
负责处理网络请求，同时产生的跨域问题也是在网络进程中被拦截的，一般浏览器中页面之间是共享一个网络进程的
04：GPU进程
负责处理与图形相关的操作，例如绘制网页内容、执行动画和视频解码。这可以减轻主进程和渲染进程的工作负担，提高了性能。一般浏览器中页面之间是也是共享一个GPU进程
05：插件进程+其他进程
总结：现代浏览器通常有一个主进程（浏览器进程）、多个渲染进程（用于运行页面，每个页面一个渲染进程）、一个共享的网络进程（处理网络请求），以及一个共享的GPU进程（处理图形渲染）。其他进程（如插件进程等）也可能存在。
执行调度优先级？（一个进程下有多个子线程）
由于渲染主线程主要分则解析js,css,html，布局，图层处理，计时器等等操作，非常繁忙！
这里就有一个调度问题？（以前端角度）
01: js执行一半的时候，用户有了交互，怎么处理？
02：js执行一半的时候，有个定时器时间到了，怎么处理？
03：js执行一半的时候，请求回来了，怎么处理？
04：......
过程: 渲染主线程开始时循环状态，每次都去任务队列查看是否有任务，有任务的话就进入主线程，没有进入休眠状态。
同时其他的线程的任务可以随时插入任务队列中(任务队列尾部);
有些操作(网络请求，绑定事件， 定时器。。。)无法立即执行的操作，不能让其一致占有主线程，导致其他的任务不能执行。于是渲染主线程分成了：同步任务和异步任务。
当渲染主线程发生计时任务，网络任务，事件监听时，会将任务交给对应的其他线程处理，并结束当前的该任务，继续后面的任务执行。
其他线程完成时，将对应的回调函数包装成任务加入消息队列尾部，等待执行
如图：渲染主线程执行同步任务,发现该任务是计时器任务，于是将该任务交给了对应的线程模块处理该任务，然后继续任务队列中的其他任务，然后计时线程结束后产生的任务，排列到任务对列尾部
任务队列： 消息队列组成（消息队列先进先出）
微队列: 优先级 最高 promise MutationObserver
交互队列: 优先级 高 点击
延迟队列: 优先级 中 计时器
目前浏览器我们用到的(事件循环从最高 高 中 以此执行读取)
在执行过程中，一定是先把最高队列的完毕在一次后面的队列
function addDelay() { console.log('延迟1'); setTimeout(() => { console.log('延迟2'); }, 100); delay(2000); }; function addInteraction() { console.log('交互1'); insectDOM.onclick = () => { console.log('交互2'); }; delay(2000); }; startDOM.onclick = function () { addDelay(); addInteraction(); console.log("============"); }; // 延迟1 交互1 ============ 交互2 延迟2 // console.log('主线程: start') // setTimeout(() => { // console.log('===== 宏任务 => set1=====') // }) // new Promise(function(onfull, onject) { // onfull(1) // setTimeout(() => { // console.log('===== 宏任务 => set2=====') // }) // }).then(res => { // console.log('+++++ 微任务 => Pro1 +++++') // }) // // 异步: 宏任务 => 微任务 // setTimeout(() => { // console.log('===== 宏任务 => set3=====') // new Promise(onfull => { // onfull(1) // }).then(res => { // console.log('------------宏任务 => set3 : 嵌套 + 微任务-------------') // }) // }) // // 异步: 微任务 => 宏任务 // new Promise(function(onfull, onject) { // onfull(1) // }).then(res => { // setTimeout(() => { // console.log('------------微任务 => Pro2 : 嵌套 + 宏任务-------------') // }) // }) // console.log('主线程: end')
来源地址：https://blog.csdn.net/qq_25919495/article/details/132487565
