我正在建立一個網站，用requestAnimationFrame進行視差滾動。有多個部分，每個部分都有一個全尺寸的背景圖像和一些中間和前景圖像。我已經設法通過reques tAnimationFrame相對平滑地制作了這個動畫，但是在動畫中仍然有偶爾的抖動。

通過以幀模式觀看Chrome的時間軸，我可以看到導致“抖動”的進程被標記為“圖像解碼”。此外，一旦動畫完成一次，jank就不會重復出現。

似乎大多數瀏覽器現在都推遲了對還沒有看到的圖像的解碼。有沒有一種方法可以在用戶看不到的情況下預解碼(不僅僅是預加載)圖像？

該問題可能與圖像被滾出/滾入視圖有關。

來自http://creativejs.com/resources/requestanimationframe/

也有人暗示瀏覽器可以選擇優化 基于負載和元素可見性的requestAnimationFrame性能 (被滾出視圖)和電池狀態。

同樣來自W3C草案

問題4我們是否希望允許將元素傳遞給 requestAnimationFrame，以便影響給定元素的動畫 當滾動到視圖之外時被抑制或暫停。

確保沒有為每個onscroll事件啟動requestAnimationFrame循環，因為這可能會導致問題。這將在另一篇文章中詳細描述

關于請求動畫幀的問題

我通過刪除檢查一個元素是否在屏幕上的那行代碼解決了這個問題，這可能和瀏覽器做同樣的事情，只是效果不好。

您可以將圖像預解碼成一個數組

const img = new Image();
img.src = "bigImage.jpg";
img.decode().then(() => {
    images.push(img)
}).catch(() => {
    throw new Error('Could not load/decode big image.');
});

在這個例子中，作者請求解碼圖像元素。解碼意味著加載，之后是圖像的解碼。該調用返回一個承諾，當該承諾實現時，確保圖像可以被附加到DOM，而不會導致下一幀的解碼延遲。