在幾毫秒內連續更新 Web 影片的 currentTime 屬性對性能/效率有何影響？
我想做的是將網路影片在其時間范圍內的當前點與在螢屏上平移手指的用戶聯系起來。通常，這是通過從指標移動事件呼叫 requestAnimationFrame 并直接在元素上設定 css 屬性來完成的。但是，我想改用網路影片。
let animatedObj = animatedEl.animate(props, timing)
el.addEventListener('pointermove', (event) => {
animatedObj.currentTime = (.... percentage of pointer position ....)
})
但它是否比 requestAnimationFrame 和直接設定 css 屬性更容易出現卡頓或電池能量密集？設定 currentTime 不是為在 ms 內持續更新而設計的嗎？在設定影片的 currentTime 的同時使用 requestAnimationFrame 會更好嗎？
uj5u.com熱心網友回復：
以這種方式設定是完全可以接受的currentTime，并且理論上應該比直接設定 CSS 屬性稍微提高性能，因為不需要在每一幀上重新決議 CSS 屬性值。然而，在實踐中，差異應該可以忽略不計。通過使用 Web 影片，您還可以使用緩動效果等，這可能是一個優勢。
我假設animatedObj在您的示例中已暫停。通過暫停它，您可以確保當平移位置沒有改變時它不會不必要地觸發樣式更新。
通過使用requestAnimationFrame，您可以確保在更新樣式之前（但在更新影片時間之后）運行回呼，在某些情況下，這可能意味著您可以避免弄臟和更新樣式兩次，從而產生更好的性能。但最終，它將取決于您的應用程式，因為它可能會通過從 等中讀取值來重繪 getComputedStyle樣式innerHeight。
此外，通過使用，requestAnimationFrame您可以確保每幀只更新一次樣式，即使多個事件在同一幀中到達。
請注意，性能仍然無法與定期播放的 Web 影片相媲美，因為與常規影片不同，瀏覽器無法將此手動驅動的影片卸載到合成器（這可能會減少電池使用量，因為樣式不會需要在主執行緒上更新）。即將推出的滾動鏈接影片功能應該對此有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/443839.html
標籤：javascript 动画 CSS动画 网络动画