目录
定时器(func[, delay, arg1, arg2, ...])
HTML 标准:定时嵌套调用被安排了 5 次及以上(定时器最短时长设定为4ms)
Firefox 桌面版和 Chrome :1 秒的最小超时值
标签中包含 AudioContext,Firefox 不会节流
Firefox 在后台标签最小延迟是 10 秒(在文档首次加载后 30 秒开始生效)
解决:requestAnimationFrame刷新频率一致
requestAnimationFrame:浏览器专门为动画提供的API
requestAnimationFrame 属于 GUI引擎
JS引擎与GUI引擎是互斥的: GUI引擎在渲染时会阻塞JS引擎的计算
当页面被隐藏或最小化时:定时器 setTimeout仍会在后台执行动画任务
当页面处于未激活的状态下,该页面的屏幕刷新任务会被系统暂停:requestAnimationFrame也会停止
delay=0/不设置delay默认为0:下一个事件循环执行
promise>MutationObserver>setImmediate>setTimeout
setTimeout() 全局函数 - Web API 接口参考 | MDN
定时器(func[, delay, arg1, arg2, ...])
delay=Number(delay)
arg附加参数,一旦定时器到期,它们会作为参数传递给 functionRef
指定的函数
区别
setTimeout固定时长后执行
setInterval间隔固定时间重复执行
相同
最短时长设定为4ms(不超过4次调用,时长可以小于4ms)
相同的对象id池共享
timeoutID
值(正整数)不会被同一对象(window 或 worker)的后续调用 setTimeout()
或 setInterval()
重复使用。然而,不同的对象使用不同的 ID 池。
setTimeout() 和 setInterval() 使用共享的 ID 池,意味着在技术上可以混用 clearTimeout()
和 clearInterval()。但是,为了清楚起见,应该避免这样做
定时器不准的原因
执行超时
前一个任务
setTimeout/setInterval是宏任务,根据事件轮询机制优先级,其他任务会阻塞或延迟js任务的执行
function foo() {
console.log("foo 被调用");
}
setTimeout(foo, 0);
//很费时间的js操作
console.log("setTimeout 之后");
//输出
...超时...
setTimeout 之后
foo 被调用
自身任务
考虑极端情况,假如定时器里面的代码需要进行大量的计算,或者是DOM操作,代码执行时间超过定时器的时间,会出现定时器不准的情况
节流机制:浏览器强制执行最小超时
HTML 标准:定时嵌套调用被安排了 5 次及以上(定时器最短时长设定为4ms)
let nestedCount = 0;
function nestedTimeout() {
nestedCount++;
console.log(`Nested call ${nestedCount}`);
if (nestedCount < 5) {
// 继续嵌套调用 setTimeout
setTimeout(nestedTimeout, 0);
}
}
// 初始调用
nestedTimeout();
非活动标签(除了后台播放):优化加载损耗,降低耗电
活动标签:正在浏览的标签页。
非活动标签:在后台运行的标签页。
Firefox 桌面版和 Chrome :1 秒的最小超时值
Firefox 安卓版:15 分钟的超时,甚至卸载它们
标签中包含 AudioContext,Firefox 不会节流
追踪型脚本:跟踪用户行为
追踪型脚本通常是用于跟踪用户行为、分析网站访问情况等目的的脚本。
Firefox 在前台运行最小延迟仍然是 4ms。
Firefox 在后台标签最小延迟是 10 秒(在文档首次加载后 30 秒开始生效)
动画卡顿:刷新频率≠时间间隔
不同设备的屏幕刷新频率可能不同, setTimeout/setInterval只能设置固定的时间间隔,这个时间和屏幕刷新间隔可能不同
setTimeout/setInterval通过设置一个间隔时间,来不断改变图像实现动画效果,在不同设备上可能会出现卡顿、抖动等现象
解决:requestAnimationFrame刷新频率一致
requestAnimationFrame:浏览器专门为动画提供的API
requestAnimationFrame刷新频率与显示器的刷新频率保持一致,使用该api可以避免使用setTimeout/setInterval造成动画卡顿的情况
requestAnimationFrame:告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵dom,更新动画的函数)
与定时器区别
1)引擎层面
setTimeout: JS引擎
,存在事件轮询
requestAnimationFrame 属于 GUI引擎
JS引擎与GUI引擎
是互斥的: GUI引擎在渲染时会阻塞JS引擎的计算
这样设计的原因,如果在GUI渲染的时候,JS同时又改变了dom,那么就会造成页面渲染不同步
2)性能层面
当页面被隐藏或最小化时:定时器 setTimeout仍会在后台执行动画任务
当页面处于未激活的状态下,该页面的屏幕刷新任务会被系统暂停:requestAnimationFrame也会停止
delay=0/不设置delay默认为0:下一个事件循环执行
nextTick(Vue):DOM更新后执行回调函数
实现nectTick
promise>MutationObserver>setImmediate>setTimeout
-
Promise:如果浏览器支持
Promise
,nextTick
会优先使用Promise.then
来创建微任务,以确保回调函数在下一个微任务队列中执行。 -
MutationObserver:如果浏览器不支持
Promise
,nextTick
会检查是否支持MutationObserver
。MutationObserver
变动观察器)是一种Web API,它允许开发者监视DOM树的变化并在这些变化发生时执行回调函数允许监视DOM树的变化,因此它也可以用于异步任务的调度。nextTick
会尝试使用MutationObserver
来创建微任务。 -
setImmediate:如果浏览器既不支持
Promise
也不支持MutationObserver
,nextTick
会检查是否支持setImmediate
。setImmediate
是一种宏任务,通常比setTimeout
执行得更早,因此它用于创建宏任务级别的异步任务。 -
setTimeout:如果以上方法都不可用,
nextTick
会回退到使用setTimeout
来创建异步任务。setTimeout
是一种宏任务,但是优先级较低,可能在其他异步任务之后执行。
// 定义nextTick的回调队列
let callbacks = [];
// 批量执行nextTick的回调队列
function flushCallbacks() {
callbacks.forEach((cb) => cb());
callbacks = [];
pending = false;
}
//定义异步方法,优先使用微任务实现
let timerFunc;
// 优先使用promise 微任务
if (Promise) {
timerFunc = function () {
return Promise.resolve().then(flushCallbacks);
};
// 如不支持promise,再使用MutationObserver 微任务
} else if (MutationObserver) {
timerFunc = function () {
const textNode = document.createTextNode('1');
const observer = new MutationObserver(() => {
flushCallbacks();
observer.disconnect();
});
const observe = observer.observe(textNode, { characterData: true });
textNode.textContent = '2';
};
// 微任务不支持,再使用宏任务实现
} else if (setImmediate) {
timerFunc = function () {
setImmediate(flushCallbacks);
};
} else {
timerFunc = function () {
setTimeout(flushCallbacks);
};
}
// 定义nextTick方法
export function nextTick(cb) {
callbacks.push(cb);
if (!pending) {
pending = true;
timerFunc();
}
}