渲染管线与性能测量：练习答案

事件循环到绘制

在按钮事件中同步写入 DOM 后，微任务（queueMicrotask）会在下一个宏任务前执行；requestAnimationFrame 回调发生在下一次绘制前。答案应记录 event → microtask → rAF，而不是把 setTimeout(0) 当成绘制信号。

布局、绘制与合成

对照实验只改变属性：一组循环写 style.left，另一组写 style.transform。Performance 面板中前者通常能看到布局相关事件，后者在条件合适时可只产生合成；结论必须以当前设备的录制为准，不能写成任何元素都永远如此。

PerformanceObserver 与长任务

const entries = []
const observer = new PerformanceObserver((list) => {
  entries.push(...list.getEntries().map(entry => entry.duration))
})
observer.observe({ type: 'longtask', buffered: true })
setTimeout(() => console.log(entries), 0)

没有长任务时 entries 可能为空；这不等于观察器失效。先用一个超过 50ms 的同步循环制造对照，再比较优化后的版本，并在页面卸载时调用 observer.disconnect()。

调度、idle 与优先级

示例的可验证契约是每次点击先打印 scheduled，任务回调随后打印 ran。支持 scheduler.postTask 时记录实际支持情况；不支持时的 setTimeout 只保证异步降级，不证明相同优先级或相同帧时延。刷新页面后未执行任务不能再更新已卸载的 DOM，应在拥有任务的一方保存取消句柄或用页面生命周期信号停止提交。