我有一个使用3幅画布的HTML5应用程序，其中两幅包含使用Three.js渲染的WebGL 3D场景
这三个画布位于一个自定义滑动器内，该滑动器在全窗口大小时仅显示一个画布。我遇到的问题是，即使我在初始化期间加载了三个视图，也有一些东西在不可见的webgl画布中加载，直到我滑动它，然后加载并显示它。当我说加载时我的意思是渲染中的东西，因为场景和所有方法从一开始就正常工作。
我检测到了这一点，因为在第一次滑动到这个div时，需要一些时间并且控件在此期间被擦拭，用户并不真正知道他是否正确点击了因为＆＃34的活动状态;下一步滑动＆＃34;直到此未知加载结束时才会激活按钮。幻灯片动画也可能被跳过，因为这种加载比滑动需要更多的时间。一旦显示一次，行为就是正确的，它会从一个视图快速滑动到下一个视图。
即使画布在屏幕外，渲染中是否有选项或浏览器强制进行此加载？理想情况下，仅在初始化期间，因为我不希望GPU渲染未显示的内容，只需预加载它们。
答案 0 :(得分：0)
如果使用某些阻止标志来避免在满足某些条件时更新和渲染场景，请确保在站点初始化期间允许每个渲染器至少有一个requestAnimationFrame循环。在第一个周期中，一些耗时的初始化已经完成，如果我们等待第一次渲染场景直到我们需要它的那一刻，它将不得不在那个时刻进行初始化，这可能会扰乱您站点的响应能力：< / p>
e.g。一个3个场景的滑块，每次只显示一个;使用阻止系统仅更新当前显示的场景。如果我们不允许初始化所有三个场景，只有在站点加载时显示的场景已经初始化，这意味着如果我们滑动到其他场景之一，它们将必须与滑动动画同时初始化被触发了。由于初始化比动画长，因此滑动效果丢失，并且在第一次显示该场景时发生闪烁;之后，行为将是正确的，因为该场景已经初始化。