微信扫一扫 关注微信公众号阿勇学前端
ayongnice chatgpt欢迎使用
我们都知道前端JS文件运行环境是浏览器 ,浏览器是一个多线程的程序,就是一个人可以同时干多个活
其中，最主要的进程有:
1. 浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
2.网络进程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
3.渲染进程( 重点 )
渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、 CSS、 JS代码。
默认情况下，浏览器会为每个标签页开启-个新的渲染进程，以保证不同的标签页之间不相互影响(浏览器厂商最新版本有着 多个标签页面在同域名下使用一个进程,从而达到减少性能消耗的 计划)。
渲染主线程怎么工作?
渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于:
●解析CSS
●计算样式
●布局
●处理图层
●每秒把页面画60次(就是我们常说的 帧率60)
●执行全局JS代码
●执行事件处理函数
●执行计时器的回调函数
●......
因为这个事情都要有一个顺序 ,所以这么多事 只能交给渲染主线程 一个线程去做
要处理这么多的任务，主线程遇到了一个前所未有的难题:如何调度任务?
比如:
●我正在执行一个JS函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗?
●我正在执行一个JS函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗?
●浏览器进程通知我"用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢?
渲染主线程想出了一个绝妙的主意来处理这个问题:排队
1. 在最开始的时候，渲染主线程会进入一个无限循环 I
谷歌浏览器源码里 有个方法 叫MessagePumpDefault 消息队列方法 里面的 for(;;){}. 就是无限循环,这是c++代码,JS这样写也是一样
for(;;){console.log('阿勇学前端')}
不要去浏览器控制台实验,不要问为什么
事件循环解释
2.每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循 环;如果没有，则进入休眠状态。
3.其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加 新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务
这样一来，就可以让每个任务有条不紊的、持续的进行下去了。
整个过程，被称之为事件循环(消息循环).
最后说一句 事件循环是浏览器做的. 不是JS做的,没有什么所谓的JS事件循环!!!
啥叫异步?
代码在执行过程中，会遇到一些无法立即处理的任务，比如:
●计时完成后需要执行的任务-- setTimeout 、setInterval
腾
●网络通信完成后需要执行的任务--XHR、Fetch
●用户操作后需要执行的任务-- addEventListener
如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」;
就像高速公路上堵车, 堵车很烦是因为人家还有别的事要去做;
浏览器也是一样, 渲染主线还有别的事去做, 我要每秒画60次页面,处理布局, 处理计时器;等等等.. 所有渲染主线程不能一直在等这些任务
**就像这段代码, 虽然计时器倒计时0秒,但是依然被计时器线程 用回调函数包装成任务添加到了消息队列的末尾
**
总结下JS异步
JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一-个。
而渲染主线程承担着诸多的工作，渲染页面、执行JS都在其中运行。
如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。
这样一来，- -方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现
象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将
任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的
回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。
JS为何阻塞页面渲染?
<body>
<div id="test">阿勇</div>
<script>
function deep(dur) {
const st = Date.now()
while (Date.now() - st < dur) { }
}
test.onclick = function () {
this.textContent = '阿勇最帅';
deep(3000)
}
</script>
</body>
你猜这个div文案显示会立马变成 阿勇最帅 吗?
不会的,因为你的点击事件里有个循环3秒事件,改变文案操作 和 循环事件是在一个方法里的,也就是说 在点击事 div文案是变成了 ‘阿勇最帅’ ,但是他不会立马将文案的改变交给 渲染线程去绘制, 不绘制你是看不到 显示的 ,
所有刚才问题 我把 ‘’显示‘’ 标记了黄色, 那浏览器什么时候绘制呢? 要这个方法里其他JS 全部执行完,渲染主线程 才回去绘制 用刚才的异步队列消息图完全解释通
任务队列优先级 ?
根据W3C 最新解释
●每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
在- -次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
●浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
跟之前不一样了 ,浏览器取消了宏队列
在目前chrome 的实现中，至少包含了下面的队列:
●延时队列:用于存放计时器到达后的回调任务，优先级「中」
●交互队列:用于存放用户操作后产生的事件处理任务，优先级「高」点击事件
●微队列:用户存放需要最快执行的任务，优先级「最高」Promise.resolve().then(函数)
谷歌源码 TaskType 方法里对每个任务都规定了优先级
**
**
这三个是计时器 的任务类型 数字越大优先级越高
function a() {
console.log(1);
Promise.resolve().then(function () {
console.log(2);
})
}
setTimeout(() => {
console.log(3);
})
Promise.resolve().then(a)
console.log(5); //输出 5123
