requestAnimationFrame是否可以被long卡住javascript
Does requestAnimationFrame can be stuck by long javascript
我知道requestAnimationFrame在浏览器重新渲染前会被调用,频率大约是60fps,但是如果有很长的javascript requestAnimationFrame 的回调是否可以阻止浏览器的重新渲染?因此卡住了下一个 requestAnimationFrame?
然后移开,为什么浏览器以 60fps 重新呈现,如果没有内容或样式更改?
虽然您所说的关于 60fps 的内容是正确的,但根据 docs
requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden iframes in order to improve performance and battery life.
是的。
与任何基于事件的函数调用(requestAnimationFrame
、setTimeout
、addEventListener
等)一样,如果 JS 引擎忙 运行使用另一个函数(即使是之前迭代中的相同函数)然后新函数不能 运行 直到前一个函数完成。
我是一名游戏开发者,对此非常熟悉。任何渲染时间过长的帧不仅会降低帧率,还会锁定 DOM.
我强烈建议您研究网络工作者和屏幕外 canvas'。这允许您将重负载推入不会干扰动画帧或 DOM.
的后台进程
可以在此处找到几个优秀的演示:https://developers.google.com/web/updates/2018/08/offscreen-canvas
我知道requestAnimationFrame在浏览器重新渲染前会被调用,频率大约是60fps,但是如果有很长的javascript requestAnimationFrame 的回调是否可以阻止浏览器的重新渲染?因此卡住了下一个 requestAnimationFrame?
然后移开,为什么浏览器以 60fps 重新呈现,如果没有内容或样式更改?
虽然您所说的关于 60fps 的内容是正确的,但根据 docs
requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden iframes in order to improve performance and battery life.
是的。
与任何基于事件的函数调用(requestAnimationFrame
、setTimeout
、addEventListener
等)一样,如果 JS 引擎忙 运行使用另一个函数(即使是之前迭代中的相同函数)然后新函数不能 运行 直到前一个函数完成。
我是一名游戏开发者,对此非常熟悉。任何渲染时间过长的帧不仅会降低帧率,还会锁定 DOM.
我强烈建议您研究网络工作者和屏幕外 canvas'。这允许您将重负载推入不会干扰动画帧或 DOM.
的后台进程可以在此处找到几个优秀的演示:https://developers.google.com/web/updates/2018/08/offscreen-canvas