1. requestAnimationFrame: requestAnimationFrame主要用于执行动画，它会在浏览器下一次重绘之前调用指定的回调函数
function animateWithRAF(timestamp) { // 执行动画逻辑 requestAnimationFrame(animateWithRAF);}
requestAnimationFrame(animateWithRAF);
优点：
1. 与显示器刷新率同步，通常为60fps
2. 在不可见标签页中会暂停，节省资源
3. 动画更平滑
2. setInterval + clearInterval:对于需要重复执行的任务，setInterval比多个setTimeout更合适。
const intervalId = setInterval(() => {
console.log("每秒执行一次");
}, 1000);
// 停止定时器//
clearInterval(intervalId);
优点：
1. 代码更简洁
2. 更适合固定间隔的重复任务
3. requestIdleCallback:当浏览器空闲时执行低优先级任务，避免影响关键操作
requestIdleCallback((deadline)=>{
if(deadline.timeRemaining()>0){
// 执行非关键任务
}
}，{timeout:2000})
优点：
1. 充分利用浏览器空闲时间
2. 可以设置超时保证任务最终会执行
3. 不阻塞主线程关键操作
4. Web Workers:将耗时任务移至后台线程，避免阻塞主线程
// main.js
const worker = new Worker('worker.js')
worker.onmessage = (event)=>{
console.log('收到Woker消息：', event.data);
}
// worker.js
setInterval(()=>{
postMessage('定时任务完成')
},1000)
5. Promise + async/await: 用Promise包装setTimeout，结合async/await使异步代码更清晰
function delay(ms){
return new Promise(resolve=>setTimeout(resolve,ms))
}
async function delayTask(){
console.log('开始')
await delay(2000)
console.log('2秒后')
}
delayTask()
优点：
1. 代码更清晰，避免回调地狱
2. 更好的错误处理
3. 便于链式组合多个异步操作
6.Web Animations API ：对于动画效果，Web Animations API提供了更高级的控制
const element = document.querySelector('.box')
const animation = element.animate([
{ transform: ' translateX(0)'},
{ transform: ' translateX(300px)'}
],{
duration:1000,
fill:'forwards'
})
animation.onfinish = ()=>console.log('动画完成')
优点：
1. 声明式API，更易于理解
2. 内置的暂停、恢复和控制功能
3. 比CSS动画和setTimeout更精确
7. Intersection Observer：当元素进入视口时执行代码，比如延迟加载资源或触发动画
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("元素进入视口");
// 执行需要的操作
}
});
});
observer.observe(document.querySelector('.lazy-load'));
优点：
1. 无需手动计算元素位置
2. 性能更好，避免滚动事件中大量计算
3. 适合实现"按需执行"的场景
