IntersectionObserver和ResizeObserver回调函数的执行时机:微任务还是宏任务?
虽然MutationObserver的回调函数明确运行在微任务队列中,但IntersectionObserver和ResizeObserver回调函数的执行环境却并非显而易见。本文将通过测试和分析,探究其运行机制。
规范中的描述:
MDN文档中对IntersectionObserver和ResizeObserver的构造函数部分都描述了其回调函数类型:IntersectionObserverCallback和ResizeObserverCallback,分别接收IntersectionObserverEntry列表和IntersectionObserver或ResizeObserverEntry列表和ResizeObserver作为参数。然而,文档并未明确指出回调函数的执行时机。
测试代码及结果分析:
为了确定IntersectionObserver和ResizeObserver回调函数的执行时机,我们设计了以下测试代码:
console.log("代码开始");
// MutationObserver (微任务)
const mo = new MutationObserver(() => {
console.log("微任务", "Mutation Observer");
});
mo.observe(document.body, { childList: true });
// IntersectionObserver (测试对象)
const io = new IntersectionObserver((entries) => {
console.log("测试对象", "Intersection Observer");
});
io.observe(document.body);
// ResizeObserver (测试对象)
const ro = new ResizeObserver((entries) => {
console.log("测试对象", "Resize Observer");
});
ro.observe(document.body);
// Promise (微任务)
Promise.resolve().then(() => {
console.log("微任务", "Promise then");
});
// setTimeout (宏任务)
setTimeout(() => {
console.log("宏任务");
}, 0);
console.log("代码结束");
运行结果通常如下(顺序可能略有差异,但IntersectionObserver和ResizeObserver始终在Promise之后,宏任务之前):
代码开始
代码结束
微任务 Mutation Observer
微任务 Promise then
测试对象 Intersection Observer
测试对象 Resize Observer
宏任务
结论:
通过以上测试,我们可以得出结论:IntersectionObserver和ResizeObserver的回调函数也运行在微任务队列中,其执行时机在Promise的then
回调之后,setTimeout
回调之前。 这与MutationObserver的执行环境一致,都属于微任务。 这确保了这些回调函数在浏览器渲染下一帧之前执行,从而保证了页面更新的流畅性。