移动设备上的 webGL 上下文处于活动状态时导航断断续续
Navigation stutters with webGL context active on mobile
我正在开发一个网站，其中包含使用 three.js 制作的英雄横幅。场景非常简单，即使在低端设备上也能以 60fps 的速度渲染 运行。
但是在移动设备上我遇到了问题。当页面向下滚动很多然后再次向上滚动时，浏览器会冻结 1-2 秒（在我的设备上，Android 和 Chrome 移动设备）。
我认为这是由于 Chrome“节省资源”而 canvas 在视口上不可见。我怎样才能防止这种情况发生？
您有 28 个脚本，所以可能有很多开销。您可以尝试减少脚本、分辨率、and/or 切换到 setTimeout。最后，我认为这是一个直接的解释：
- requestPostAnimationFrame spec proposal
- Why is requestAnimationFrame() running my code at the end of a frame, and not at the start of it?
- requestAnimationFrame() not for animation
我通过在 canvas 超出视口 cancelAnimationFrame 时停止渲染来解决我自己的问题。
此问题的更多信息：
我正在开发一个网站，其中包含使用 three.js 制作的英雄横幅。场景非常简单，即使在低端设备上也能以 60fps 的速度渲染 运行。 但是在移动设备上我遇到了问题。当页面向下滚动很多然后再次向上滚动时，浏览器会冻结 1-2 秒（在我的设备上，Android 和 Chrome 移动设备）。
我认为这是由于 Chrome“节省资源”而 canvas 在视口上不可见。我怎样才能防止这种情况发生？
您有 28 个脚本，所以可能有很多开销。您可以尝试减少脚本、分辨率、and/or 切换到 setTimeout。最后，我认为这是一个直接的解释：
- requestPostAnimationFrame spec proposal
- Why is requestAnimationFrame() running my code at the end of a frame, and not at the start of it?
- requestAnimationFrame() not for animation
我通过在 canvas 超出视口 cancelAnimationFrame 时停止渲染来解决我自己的问题。
此问题的更多信息：