20200526

[into-piece]

event-loop

• 每一轮 Event Loop 都会伴随着渲染吗？
• requestAnimationFrame 在哪个阶段执行，在渲染前还是后？在 microTask 的前还是后？
• requestIdleCallback 在哪个阶段执行？如何去执行？在渲染前还是后？在 microTask 的前还是后？
• resize、scroll 这些事件是何时去派发的。

流程

1. 从任务队列中取出一个宏任务并执行。
2. 检查微任务队列，执行并清空位人物队列，如果在微任务的执行中又加入了新的微任务，也会在这一步一起执行。
3. 判断是否需要渲染，不一定每一轮 event loop 都会对应一次浏览 器渲染。
4. 如果需要渲染，这个时候需要执行一些渲染前的准备工作
   • 如果窗口大小变化监听resize
   • 页面滚动则scroll
   • 执行帧动画回调，也就是 requestAnimationFrame 的回调
   • 对于需要渲染的文档， 执行 IntersectionObserver 的回调。
5. 重新渲染页面
6. 判断 task队列和microTask队列是否都为空，如果是的话，则进行 Idle 空闲周期的算法，判断是否要执行 requestIdleCallback 的回调函数。（后文会详解）

IntersectionObserver

一直以来我们要监控2个元素的相对位置，总是比较麻烦的，而且之前也只能通过js以及每个元素的top值来控制，这也极易拖慢整个网站的性能。然而，随着网页的发展，对上述检测的需求也随之增加，多种情况下都需要用到元素交集变化的信息。

Intersection Observer的出现，解决了这个问题，Intersection Observer API 会在浏览器注册一个观察者，并且可以设定据地要观察的目标（target），当目标元素（target）以及根元素或者指定的外层元素（root元素）相互交叉的时候触发事件。