关键词：阻塞，主线程，事件环（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，事件环应该怎么执行。
xml
setTimeout(() => {
console.log('111111')
}, 1000)
setTimeout(() => {
console.log('22222')
}, 1000)
事件环中添加任务队列（如上图）
进入任务队列，开始执行第一个setTimeout
开始执行任务队列中的第二个setTimeout，执行完之后关闭任务队列的通道
事件环、任务队列的内容就分享完了，如果不是很懂，那就研究 Promise吧
二、事件环、任务队列、渲染就变的复杂了
当考虑到渲染时就变的复杂了
布局树、绘制图层
s： 收集所有的css
l： 布局是创建一个渲染树，找出页面上所有内容
p： 元素的位置
在javascript中执行以下代码：
xml
setTimeout(() => {
while(true)
})当遇到死循环后，事件循环卡在了任务队列，需要等这个任务执行完之后，再绘制页面
当事件环在死循环的过程中，用户点击按钮，复制文字，都会将这一系列事件放在任务队列中，等待事件循环执行完成死循环在继续执行
xml
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),就是当屏幕刚好刷新时，会记录下闪动的位置。