0

我第一次在这里提问，这个网站非常有帮助，我只是找不到我的问题的答案。

请耐心等待，在提出我的问题之前我会充分解释自己:)

我正在开发一个在桌面上运行的 html5 游戏，并在移动设备上作为应用程序运行。

在游戏的一部分中，我有一个 1500 x 1200 的画布，它被渲染一次，它被放置在 DOM 中的某个位置，在一个较小的 div 内，它允许在该 div 内滚动画布。

这在桌面和 iOS 移动设备上运行得非常好。但它在 Android 上运行得不是很好。性能不佳是指触摸需要一两秒钟才能注册，然后当手指移动以滚动画布时，画布会滞后。

我做了很多研究和大量测试：

-我可以通过暂时关闭easeljs和相关脚本来提高性能，但应用程序的其余部分需要这个。- 通过删除 $(document) 和其他元素的绑定获得了进一步的性能。但是，Android 的性能仍然无法与 iOS 和 Desktop 相媲美。

最终，当 canvas 元素被 .removed() 并附加到 html 'body' 时，我获得了接近桌面的性能。为什么是这样？我显然不能在游戏中使用这种方式，但我需要以某种方式重新创造这种性能提升。

这是更令人困惑的事情。再次将相同的 Canvas 元素删除并附加到它在 DOM 中的位置，现在在性能方面仍然要好得多。它现在滚动更流畅，触摸输入延迟更少。有人可以给出提示或解释为什么会这样吗？

这种行为的可能原因是什么？

//编辑： 关于我的问题的更多解释。滚动元素时，Android 上有哪些主要的性能影响？触摸触发的事件太多？DOM 中的元素太深？DOM 中的 CSS 太多？EaselJS 玩不好？

谢谢

4

1 回答 1

1

我感觉到你的痛苦。由于在这一点上大部分都是黑魔法，我能做的最好的就是联系类似的经验并提供建议：

  • DOM，让它尽可能简单。我通常保持它很干净。由于不同的布局方法遗留了一些不必要的 CSS 语句，我遇到了各种滚动问题。因此，每当您更改某些内容时，请彻底清理。

  • 小心溢出。由于溢出，我的第一个 phonegap 应用程序遇到了很多问题。出于某种原因，Android 在除 html 元素之外的任何内容中都很难溢出。我相信这与固定定位有关，并且 Android <= 2 也无法做到（不，没有在非标签中滚动 - 严重）。我也有一些多余的溢出语句（见前一点），只是破坏了性能。

  • 尝试在实际的 HTML 标记上滚动该画布元素。就在最近，我将一个动画画布元素从 HTML 元素中滚动的内容切换为滚动 div 元素的内容，并遇到了与您遇到的问题非常相似的问题。我会在这里验证回到旧方法是否可以解决所有问题。这也不能解决我真正的问题，但至少它会缩小问题的范围。

  • 可能不相关，但对于滑动情况下的滚动，太多的滑动库通过 nuking 默认行为来破坏滚动性能<event object>.preventDefault()

  • 如果在调整过程中遇到动量滚动问题（轻弹时没有惯性），请参阅 webkit-overflow-scrolling-touch 以获得帮助我解决 iOS 问题的修复程序。这是一个不错的链接：http ://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

  • 此外，Android 的 Web 视图画布实现非常糟糕，并且在所有移动设备上滚动都令人讨厌

于 2013-10-27T05:14:53.230 回答