事件循环（也叫事件环，也叫event loop）--任务队列（等待执行的任务）--渲染三者的关系

关键词：阻塞，主线程，事件环（event loop）、任务环（任务队列）、单线程、

本视频总结：
超级复杂的JS底层。事件循环和事件队列的关系。宏任务、微任务和raf回调这3个事件队列的关系。任务队列和执行栈的关系。dom点击事件和js调用函数对执行栈的不同影响。事件循环和 dom渲染之家raf回调函数的执行。附带要理解函数调用过程词法环境和执行上下文。

弹幕上说碳酸饮料对课程没有关系，其实他是在类比举例。可以这么理解，浏览器维护了一个队列，里面放着一大群喝碳酸水的人（task），这些人很古怪，需要尽量减少和他们打交道（微任务难以控制，所以后面推荐用requestAnimation去代替setTimeout）。
至于后面那个高层就是纯粹活跃气氛了，这么看应该能理解他为什么举例喝碳酸水了。我感觉这就是文化差异吧，可能咱们这么演讲的太少了。顺便一提，他之前说他

女朋友提醒他还有几天去新加坡时也是一个类比，和setTimeout差不多一个样子

javascript --》浏览器 --》事件环

一、事件环跟任务队列

1、什么是事件环（event loop）？？

在程序执行的过程中都有主线程，允许有其他的线程进入，比如网页（浏览器），一旦这些线程需要页面响应操作，需要通知主线程，就需要事件环来协调工作。

2、那必须先解释什么是主线程？？

主线程 – 有大量的事情发生 1、javascript 发生的地方。 2、渲染发生的地方。 3、DOM存放的地方。
这也说明网页上大部分活动都具有确定的顺序，我们不会同时运行多段代码去修改同一处DOM

2.1 人们会什么不会思考单线程？

作为人类，我们并没有主线程，而人类就是多线程的。

人（醒着）的时候是— 多线程，可以说话，看，听，脚动

人（睡觉）的时候是— 单线程，看不见，听不到，只是在睡觉

2.2 任务队列，也是任务环中最重要的一部分。

setTimeout(() => {
如果页面中所有内容都放在延时器中，会阻塞页面执行
}, 5000)

setTimeout(() => {
console.log(‘时间到了，开始执行！！！’)
}, 5000)
如果页面中所有内容都放在延时器（以外），页面就会正常执行，将延时器添加到任务队列中，当到5s时间的时候，会打开与主线程的开关，执行。

3、事件环正常运行时

在这里插入图片描述

4、事件环中有任务队列时

任务队列：嘿，我有个任务交给你
主线程：
任务循环中首先要关注的 TASK Queues，先有事件环，然后
浏览器：有新的事件会通知到事件环
事件环说：已经将它放在待办列表，稍后就会执行，

如下两个setTimeout，事件环应该怎么执行。

	setTimeout(() => {
		console.log('111111')
	}, 1000)
	setTimeout(() => {
		console.log('22222')
	}, 1000)

在这里插入图片描述
事件环中添加任务队列（如上图）

进入任务队列，开始执行第一个setTimeout

在这里插入图片描述
开始执行任务队列中的第二个setTimeout，执行完之后关闭任务队列的通道

事件环、任务队列的内容就分享完了，如果不是很懂，那就研究 Promise吧

点击跳转promise文章地址

二、事件环、任务队列、渲染就变的复杂了

当考虑到渲染时就变的复杂了

布局树、绘制图层
s：收集所有的css
l：布局是创建一个渲染树，找出页面上所有内容
p：元素的位置
在这里插入图片描述

在javascript中执行以下代码：

	setTimeout(() => {
		while(true)
	})

当遇到死循环后，事件循环卡在了任务队列，需要等这个任务执行完之后，再绘制页面

在这里插入图片描述

当事件环在死循环的过程中，用户点击按钮，复制文字，都会将这一系列事件放在任务队列中，等待事件循环执行完成死循环在继续执行

在这里插入图片描述

Promise.resolve()
  .then(() => {
    console.log(1);
    Promise.resolve()
      .then(() => console.log(3))
      .then(() => console.log(4));
  })
  .then(() => console.log(2));
//上面代码打印出来的顺序是： 1 3 2 4。为什么是这样？一直没搞懂。

以上图解就是 while为什么会阻止渲染和其他页面交互，这其实是一件好事

比如同样是动画，用 animation 执行，就是匀速的

而使用 settimeout执行，就是闪动走的，因为页面渲染跟 HZ（屏幕刷新率）有关，假设为 60HZ，那么 settimeout(() => {}, 1000 / 60),就是当屏幕刚好刷新时，会记录下闪动的位置。