浏览器端 event loop

渲染过程

1. （tick开始）宏任务队列中选择最近一个放入执行栈中执行，执行完检查是微任务队列中是否有任务，去最近一个放入执行栈中执行，直至微任务队列为空。
2. 更新渲染
   1. 判断是否需要进行更新渲染
   2. resize回调（如果有）
   3. scroll回调（如果有）
   4. media queries，有变化则提交事件MediaQueryListEvent
   5. 执行 css animation，触发 animationstart 等 animation 相关事件
   6. fullscreen?
   7. requestAnimationFrame回调（如果有）
   8. IntersectionObserver回调（如果有）
   9. 执行渲染流程
3. 继续第一步

注1：阶段1可以看作是js的事件循环（event loop机制）

注2：以上阶段除 执行渲染流程 阶段，全是js执行阶段，可能会触发 强制同步重排

执行渲染流程

1. 重新构建DOM
2. 重新计算css规则，构建csOM，与DOM生成render tree
3. 计算布局信息
4. 绘制
5. 合成

注1：以上流程1-4如有必要才会执行（修改了dom，css，class等）

注2：该流程仅为简略版，详细版待续…

术语：

• tick：一个循环
• 任务类型：宏任务（macro task）、微任务（micro task）
• 执行栈：主线程中函数的调用栈（栈数据结构）
• 异步任务触发源：本身不直接产生异步任务，用来触发异步任务（定时器、promise等）
• 宏任务：script、定时器、UI事件、I/O、message
• 微任务：promise触发的任务、MutaionObserver
• 位图：图片的二维数组
• 光栅化：基于位图，坐标变换，几何离散化后填充像素
• 纹理：GPU专有的绘制图片的二维数组（GPU的位图）