为什么会出现这种渲染伪影？

Question

我正在使用cordova 为Android 开发简单的手机游戏。该游戏是简单的隐藏对象游戏，玩家必须在场景中找到请求的对象。我的一个关卡表现非常缓慢。更强大的设备运行良好。我尝试使用 translateZ hack 强制 GPU 渲染并获得了巨大的性能提升，但是在低端设备上开始有线渲染工件。

此截图来自魅族U10。背景由 3 层组成，绝对位置，z-index 1,2,3。要查找的对象（牛、鸡等）具有相同的绝对位置，z-index 取决于它们相关的背景。如果在同一设备上的浏览器中运行游戏，则没有伪影，性能也很好。谷歌没有给我任何有用的线索，所以我将非常感谢任何猜测和提示。

Answer 1

使用 SVG 可能是您可能需要考虑的一个选项，尤其是内联 SVG。

使用内联 SVG 有利于网站的性能，因为 它消除了需要在图像文件中加载的 HTTP 请求。自从 不需要下载文件，这会导致加载时间更短 页。这使您的网站更快地出现在访问者面前，从而提高 用户体验。

Answer 2

如果您想在游戏中获得性能，您真的应该考虑使用 webGL 渲染引擎，例如 PixiJS。您只需要将图像转换为纹理。