目录
js单线程
竞态:DOM操作冲突
禁止跨线程访问DOM:webworker线程不能直接操作DOM
事件回调简单
宏任务:在主线程上排队执行的任务,顺序执行
宏任务macrotask: setTimeout,setInterval定时事件,Ajax,DOM事件,script 脚本的执行、 I/O 操作、UI 渲染等。
优先级:js>setImmediate>setTimeout
微任务:不进入主线程、而进入"微任务列表"的任务
微任务microtask(异步):Promise 、async/await、alert
优先级:process.nextTick>alert>Promise=async/await
async、await事件轮询执行时机
async隐式返回Promise,会产生一个微任务await xx;后的代码在微任务时执行
nextTick:DOM更新后执行回调函数
实现nectTick
promise>MutationObserver>setImmediate>setTimeout
Node中的process.nextTick
定时器(func, [delay, arg1, arg2, ...])
setTimeout固定时长后执行
setInterval间隔固定时间重复执行setTimeout、setInterval最短时长为4ms
id池共享
定时器不准的原因
setTimeout/setInterval的执行所需时间并不是确定的
setTimeout/setInterval 动画卡顿:刷新频率≠时间间隔
requestAnimationFrame:浏览器专门为动画提供的API
setTimeout、setInterval、requestAnimationFrame 区别
1)引擎层面
setTimeout: JS引擎 ,存在事件轮询requestAnimationFrame 属于 GUI引擎JS引擎与GUI引擎是互斥的: GUI引擎在渲染时会阻塞JS引擎的计算
2)性能层面
当页面被隐藏或最小化时:定时器 setTimeout仍会在后台执行动画任务
当页面处于未激活的状态下,该页面的屏幕刷新任务会被系统暂停:requestAnimationFrame也会停止
事件轮询机制
0.在执行宏任务过程中,遇到微任务,依次加入微任务队列
1.当前宏任务执行完后,会判断微任务列表中是否有任务。
2.如果有,会把所有微任务放到主线程中并执行
3.如果没有,就继续执行下一个宏任务
重复上面loop
setTimeout(delay=0)=setImmediate:下个Event Loop执行
event loop 与 浏览器更新渲染时机
宏任务 → 微任务 → 渲染更新
大量宏任务时,可以将DOM->微任务
竞态条件(race condition)和死锁(deadlock):一个删除DOM,另外一个访问DOM
安全性:JavaScript主要是在浏览器端执行,多线程的设计可能引发安全隐患,例如跨线程访问共享数据容易导致数据不一致或非法访问。
同步模型:JavaScript的单线程模型使得事件驱动和回调机制相对容易实现。当有事件触发时,JavaScript将该事件添加到事件队列中,然后按照顺序依次执行队列中的事件回调函数。这种机制使得处理异步操作、定时器和用户交互事件等变得简单。
优先级:js
>setImmediate>setTimeout
优先级:
process.nextTick>alert>Promise=
async/await
//1.script start(同步)
console.log("script start");
async function async1() {
await async2(); // await 隐式返回promise
console.log("async1 end"); // 这里的执行时机:在执行微任务时执行
}
async function async2() {
console.log("async2 end"); // 这里是同步代码
}
//2.async2 end(同步)
//微任务队列:[async1 end]
async1();
//宏任务队列:[setTimeout],setTimeOut进入下一loop
setTimeout(function() {
console.log("setTimeout");
}, 0);
//3.Promise(同步)
//宏任务队列:[setTimeout]
//微任务队列:[async1 end,promise1]
new Promise(resolve => {
console.log("Promise"); // 这里是同步代码
resolve();
})
.then(function() {
console.log("promise1");
})
.then(function() {
console.log("promise2");
});
//4.script end(同步)
console.log("script end");
//当前loop的宏任务(都是同步代码)都执行完毕
//执行所有微任务[async1 end,promise1]
//执行promise1完后碰到了promise2,加入微任务队列,接着执行
//当前所有微任务都执行完毕,开始执行宏任务队列[setTimeout]
// 打印结果: script start => async2 end => Promise => script end => async1 end => promise1 => promise2 => setTimeout
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();
}
}
console.log("start");
//定时进入下一loop,宏任务队列:[timeout]
setTimeout(() => {
console.log("timeout");
}, 0);
//微任务队列:[promise]
Promise.resolve().then(() => {
console.log("promise");
});
//process.nextTick在微任务队首
//微任务队列:[nextTick,promise]
process.nextTick(() => {
console.log("nextTick");
Promise.resolve().then(() => {
console.log("promise1");
});
});
console.log("end");
// 执行结果 start end nextTick promise promise1 timeout
setTimeout() 和 setInterval() 使用共享的 ID 池,意味着在技术上可以混用 clearTimeout()
和 clearInterval()。但是,为了清楚起见,应该避免这样做
timeoutID
值(正整数)不会被同一对象(window 或 worker)的后续调用 setTimeout()
或 setInterval()
重复使用。然而,不同的对象使用不同的 ID 池。
setTimeout/setInterval是宏任务,根据事件轮询机制,其他任务会阻塞或延迟js任务的执行
考虑极端情况,假如定时器里面的代码需要进行大量的计算,或者是DOM操作,代码执行时间超过定时器的时间,会出现定时器不准的情况
不同设备的屏幕刷新频率可能不同, setTimeout/setInterval只能设置固定的时间间隔,这个时间和屏幕刷新间隔可能不同
setTimeout/setInterval通过设置一个间隔时间,来不断改变图像实现动画效果,在不同设备上可能会出现卡顿、抖动等现象
requestAnimationFrame刷新频率与显示器的刷新频率保持一致,使用该api可以避免使用setTimeout/setInterval造成动画卡顿的情况
requestAnimationFrame:告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵dom,更新动画的函数)
JS引擎
,存在事件轮询GUI引擎
JS引擎与GUI引擎
是互斥的: GUI引擎在渲染时会阻塞JS引擎的计算这样设计的原因,如果在GUI渲染的时候,JS同时又改变了dom,那么就会造成页面渲染不同步
Event Loop执行
//宏任务队列:[]
//微任务队列:[promise0]
Promise.resolve()
.then(function() {
console.log("promise0");
})
.then(function() {
console.log("promise5");
});
//定时的setTimeout(delay=0)=setImmediate:下个Event Loop执行
//宏任务队列:[timer1]
//微任务队列:[promise0]
setTimeout(() => {
console.log("timer1");
Promise.resolve().then(function() {
console.log("promise2");
});
Promise.resolve().then(function() {
console.log("promise4");
});
}, 0);
//宏任务队列:[timer1,timer2]
//微任务队列:[promise0]
setTimeout(() => {
console.log("timer2");
Promise.resolve().then(function() {
console.log("promise3");
});
}, 0);
//宏任务队列:[timer1,timer2]
//微任务队列:[promise0,promise1]
Promise.resolve().then(function() {
console.log("promise1");
});
//执行start
console.log("start");
//执行当前所有微任务队列:[promise0,promise1]
//执行promise0时将promise5放入了微任务队列:[promise1,promise5]
//接着执行微任务队列:输出promise1,promise5
//当微任务队列为空,开始执行宏任务队列[timer1,timer2]队首的timer1
//执行timer1时碰到了微任务promise2,放进微任务队列[promise2]
//宏任务timer1执行完了,开始执行所有当前所有微任务:[promise2]
//执行promise2完碰到微任务promise4,放进微任务队列:[promise4]
//当前微任务队列不为空,接着执行promise4
//微任务队列为空,接着执行宏任务队列队首[timer2]
//执行timer2时碰到了微任务promise3,放进微任务队列[promise3]
//宏任务timer2执行完了,开始执行所有当前所有微任务:[promise3]
// 打印结果: start promise0 promise1 promise5 timer1 promise2 promise4 timer2 promise3
宏任务 → 微任务 → 渲染更新
浏览器更新渲染会在event loop中的 宏任务 和 微任务 完成后进行,即宏任务 → 微任务 → 渲染更新
(先宏任务 再微任务,然后再渲染更新)
宏任务队列中,如果有大量任务等待执行时,将dom的变动作为微任务,能更快的将变化呈现给用户
,这样就可以在这一次的事件轮询中更新dom