在網(wǎng)頁(yè)開發(fā)中，我們經(jīng)常會(huì)使用 CSS 動(dòng)畫來使頁(yè)面更加生動(dòng)。然而，在某些情況下，CSS 動(dòng)畫會(huì)被 JavaScript 阻塞，導(dǎo)致頁(yè)面表現(xiàn)不如人意。

// CSS 動(dòng)畫樣式
.my-element {
animation: my-animation 1s;
}
// JavaScript 代碼
setTimeout(() =>{
// 添加類名
document.querySelector('.my-element').classList.add('active');
}, 1000);

以上代碼中，我們使用了 CSS 動(dòng)畫來給一個(gè)元素添加動(dòng)效，同時(shí)使用 JavaScript 延遲了一秒之后添加了一個(gè)類名，這個(gè)類名可以控制元素的樣式，從而觸發(fā) CSS 動(dòng)畫。

然而，由于 JavaScript 是單線程的，當(dāng) JavaScript 執(zhí)行延遲操作時(shí)，瀏覽器將停止對(duì) CSS 樣式進(jìn)行解析和渲染。因此，在這種情況下，CSS 動(dòng)畫將被阻塞，直到 JavaScript 執(zhí)行完延遲操作。

要解決這個(gè)問題，我們可以使用requestAnimationFrame()方法來調(diào)用 JavaScript 代碼，它可以與瀏覽器的渲染進(jìn)程協(xié)調(diào)，避免阻塞 CSS 動(dòng)畫:

// JavaScript 代碼
setTimeout(() =>{
window.requestAnimationFrame(() =>{
// 添加類名
document.querySelector('.my-element').classList.add('active');
});
}, 1000);

在這個(gè)例子中，我們使用了window.requestAnimationFrame()方法來代替延遲操作，這樣 CSS 動(dòng)畫就不會(huì)被 JavaScript 阻塞了。

在實(shí)際開發(fā)中，我們應(yīng)該盡可能避免使用延遲操作和同步操作，從而避免對(duì)瀏覽器的渲染進(jìn)程造成影響，讓頁(yè)面更加流暢和優(yōu)化。