糟糕的泛,使用HTML5 Canvas和KineticJS在Android Webview上扩展性能



html5-canvas android-webview (1)

在拖放之前,您肯定需要将舞台缓存为图片,因为如果您尝试在画布中非常快速地渲染数百个文本元素(本地画布或KineticJS),则性能会很慢,特别是在Android上。 在拖动结束时,可以用destroy()销毁缓存的图像。

我们的移动Web应用程序包含一个交互式设计器,我们已经使用HTML5画布Kinetic.js实现了这一点 。 我们试图动态地将大约353个对象渲染到画布上,其中178个是文本,其余的是线条和矩形。

在平移或缩放操作期间,画布变得无响应。 看来,这种行为只展示在一个Android设备上,因为在IOS上异常出色。 我们也直接通过浏览器尝试了相同的应用程序,并注意到android浏览器和chrome上类似的无响应行为。 Firefox是相对敏感的。

我们尝试了以下链接中提供的选项,但问题仍然存在(即多个画布层)1) 使用kineticjs 性能 较差 2) 某些移动浏览器中的HTML5 Canvas出现性能问题。

在链接中指定的方法KineticJS - 使用Stage.draggable移动4000个贴图如何在dragstart之前缓存整个图层并将其恢复到dragend? 看起来很有前途,但是我们可能无法完成这个任务,因为我们的设计师将会包含相当多的用户交互(如拖放绘图部分)。

我也在这里找到另一个问题,引用类似的问题https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-especially-pan-and-zoom-is-unre

是否有任何其他可能的解决方案/修复,以改善这种表现,请帮助。

编辑 :我们在以下设备上测试我们的应用程序1)三星Note 800(Android 4.1.2)2)三星标签2(Android 4.1.2)3)华硕Transformer垫TF300TG(Android 4.2.1)和4)Nexus 7 Android 4.3)。





android-browser