如何提高webapp在视网膜设备webview中的滚动性能

Question

我有一个iPad3(ios5)：

我在本地加载我的webapp html，我禁用了所有的css3效果，比如box-shadow，以及所有我可以优化的东西，比如我用来优化一个网站的东西等等。

我所有的努力都集中在css/html上(我甚至没有执行任何javascript)，但我仍然无法获得一个可容忍的fps。

我错过了什么吗?这只是一个性能问题，就像ios5中的bug或其他问题吗？

在webapp中提高滚动性能的最佳实践是什么？

Answer 1

我一直在努力解决同样的问题(see my SO question here)

我确实使用iScroll，最近我在iOS6.1.3中遇到了另一个性能问题，但涉及到iScroll本身。我能够通过显式添加css来解决这个问题，从而在iScroll上获得硬件加速。

我使用了一个特定的页面id来分配css，但是您可以自己决定在哪里添加它，如果它对您的情况也有帮助的话。

CSS:

#myid * {
    -webkit-transform: translate3d(0, 0, 0);
}

我的iscroll使用了类s-scrollwrapper和s-scrollpane，这可能是添加css以强制硬件加速的更好的选择。那么css将会是

.s-scrollwrapper * {
    -webkit-transform: translate3d(0, 0, 0);
}

或

.s-scrollpane * {
    -webkit-transform: translate3d(0, 0, 0);
}

希望这也能帮助您提高iOS5上的速度。

Webapp on iPad 3 retina display slow screen painting