1.?requestAnimationFrame: requestAnimationFrame主要用于執(zhí)行動畫，它會在瀏覽器下一次重繪之前調(diào)用指定的回調(diào)函數(shù)
function?animateWithRAF(timestamp) {??// 執(zhí)行動畫邏輯??requestAnimationFrame(animateWithRAF);}
requestAnimationFrame(animateWithRAF);
優(yōu)點：
?1. 與顯示器刷新率同步，通常為60fps
?2. 在不可見標簽頁中會暫停，節(jié)省資源
?3. 動畫更平滑
2.?setInterval + clearInterval:對于需要重復(fù)執(zhí)行的任務(wù)，setInterval比多個setTimeout更合適。
const?intervalId =?setInterval(() =>?{??
????console.log("每秒執(zhí)行一次");
},?1000);
// 停止定時器//
?clearInterval(intervalId);
優(yōu)點：
1. 代碼更簡潔
2. 更適合固定間隔的重復(fù)任務(wù)
3.?requestIdleCallback:當瀏覽器空閑時執(zhí)行低優(yōu)先級任務(wù)，避免影響關(guān)鍵操作
requestIdleCallback((deadline)=>{
? ? if(deadline.timeRemaining()>0){
? ? ? ? // 執(zhí)行非關(guān)鍵任務(wù)
????}
}，{timeout:2000})
優(yōu)點：
?1. 充分利用瀏覽器空閑時間
?2. 可以設(shè)置超時保證任務(wù)最終會執(zhí)行
?3. 不阻塞主線程關(guān)鍵操作
4.?Web Workers:將耗時任務(wù)移至后臺線程，避免阻塞主線程
? ? // main.js
? ? const worker = new Worker('worker.js')
? ? worker.onmessage = (event)=>{
? ? ? ? console.log('收到Woker消息：', event.data);
????}
? ? // worker.js
? ? setInterval(()=>{
? ? ? ? postMessage('定時任務(wù)完成')
?????},1000)
5.?Promise + async/await:?用Promise包裝setTimeout，結(jié)合async/await使異步代碼更清晰
function delay(ms){
? ? return new Promise(resolve=>setTimeout(resolve,ms))
}
async function delayTask(){
? ? console.log('開始')
? ? await delay(2000)
? ? console.log('2秒后')
}
delayTask()
優(yōu)點：
? 1. 代碼更清晰，避免回調(diào)地獄
? 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('動畫完成')
優(yōu)點：
? ?1. 聲明式API，更易于理解
? ?2. 內(nèi)置的暫停、恢復(fù)和控制功能?
? ?3. 比CSS動畫和setTimeout更精確
7.?Intersection Observer：當元素進入視口時執(zhí)行代碼，比如延遲加載資源或觸發(fā)動畫
const?observer =?new?IntersectionObserver((entries) =>?{??
????entries.forEach(entry?=>?{? ??
????????if?(entry.isIntersecting) {? ? ?
?????????????console.log("元素進入視口");? ? ?
? ? ? ? ? ? ? ?// 執(zhí)行需要的操作? ?
?????????}?
?????});
});
observer.observe(document.querySelector('.lazy-load'));
優(yōu)點：
? ?1. 無需手動計算元素位置
? ?2. 性能更好，避免滾動事件中大量計算
? ?3. 適合實現(xiàn)"按需執(zhí)行"的場景
