移动设备上 webGL 上下文处于活动状态时导航会卡顿
我正在开发一个带有用 Three.js 制作的英雄横幅的网站。场景非常简单，即使在低端设备上渲染也能以 60 fps 运行。 但在移动设备上我遇到了问题。当页面向下滚动相当多，然后再次向上滚动时，浏览器会冻结 1-2 秒（在我的设备上，Android 和 Chrome Mobile）。
我认为这是由于 Chrome“节省资源”，而画布在视口上不可见。我怎样才能防止这种情况发生？
I'm developing a site with hero banners made with three.js. The scenes are VERY simple, and the render run at 60fps even on low end devices.
But on mobile I'm experiencing an issue. When a page is scrolled down quite a lot and then scrolled up again, the browser freezes for 1-2 sec (on my device, Android with Chrome Mobile).
I think that is due to Chrome "saving resources" while the canvas is not visible on the viewport. How can I prevent this from happening?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您有 28 个脚本，因此可能会有很多开销。您可以尝试减少脚本、分辨率和/或切换到 setTimeout。最终，我认为这是一个直接的解释：
You have 28 scripts, so maybe there is a lot of overhead. You might try reducing scripts, resolution, and/or switch to a setTimeout. Ultimately, I think this is a direct explanation:
我通过在画布超出视口时使用
cancelAnimationFrame停止渲染来解决我自己的问题。此问题的更多信息： two.js 如何在用户看不到 3d 空间时停止渲染？
I fixed my own problem by stopping the rendering while the canvas is out of the viewport with a
cancelAnimationFrame.More info in this question: three.js how to stop render when the user can't see the 3d space?