【发布时间】:2018-10-14 15:18:11
【问题描述】:
有两个页面:“索引”和“关于”。第二页有动画:link here
问题是:在本地版本上,当我转到'index'然后返回'about'时,动画fps正在改变:
第一次打开关于:
52.9 帧/秒
前往索引:
41.0 帧/秒
返回关于:
29.5 帧/秒
无法理解问题所在。项目在 Vue 上
【问题讨论】:
标签: javascript animation vue.js frontend web-frontend
有两个页面:“索引”和“关于”。第二页有动画:link here
问题是:在本地版本上,当我转到'index'然后返回'about'时,动画fps正在改变:
第一次打开关于:
52.9 帧/秒
前往索引:
41.0 帧/秒
返回关于:
29.5 帧/秒
无法理解问题所在。项目在 Vue 上
【问题讨论】:
标签: javascript animation vue.js frontend web-frontend
此错误显示在控制台中:
Too many active WebGL contexts
我猜创建一个新的渲染器并为每个安装重做所有工作不是一个好习惯?
我试图让组件保持活动状态,但问题消失了。
<keep-alive>
<router-view/>
</keep-alive>
或者您可以尝试将渲染器移动到父组件并重用它,而不是为每个安装创建一个新的。
顺便说一句,试试扩展名PixiJS Inspector,它对PIXI调试很有好处。它还显示每次单击“关于”时,都会创建一个新的 PIXI 容器。使用上面的解决方案,在整个用户交互中只会有一个。
【讨论】: