如何在Retina设备的WebView中提高WebApp的滚动性能 [英] How to improve the scroll performance of webapp in webview of retina device

问题描述

我有一个iPad3(ios5):
我在本地加载了webapp html，禁用了所有css3效果，例如box-shadow以及我可以优化的所有内容，例如我用来优化网站的内容，等等.
而且，我的全部精力都集中在css/html(我什至不执行任何javascript)上，但是我仍然无法达到可容忍的fps

I have a iPad3(ios5):
I load my webapp html locally,I disable all the css3 effect like box-shadowand everything I can optimize like what I used to optimized a website, etc.
And All my effort focus on css/html(I don't even execute any javascript),yet I still couldn't get to a tolerable fps

我错过了什么吗?仅仅是性能问题，例如错误或ios5中的其他问题?
在webapp中改善滚动性能的最佳实践是什么?

did I miss something?Is it just a performance issue like a bug or something else in ios5?
What's the best practice to improve the scroll performance in webapp?

推荐答案

我一直在努力解决同一个问题(请参阅我的这里有问题)

I have been struggling with most likely the same problem (see my SO question here)

我确实使用iScroll，最近我在iOS6.1.3中遇到了另一个性能问题，但iScroll本身存在问题.我可以通过显式添加css来解决此问题，以在iScroll上获得硬件加速.

I do use iScroll and recently I had another performance issue in iOS6.1.3 but with the iScroll itself. I was able to solve it by explicitly add css to get hardware acceleration on the iScroll.

我使用特定的页面id来分配css，但是您也可以自行决定将其添加到何处，如果它也对您的情况有所帮助.

I used a specific page id to assign the css but you can decide yourself where you need to add it if it would help for your case as well.

CSS:

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

我的iscroll使用s-scrollwrapper和s-scrollpane类，这可能是添加css以实施硬件加速的更好选择.那么css将是

my iscroll uses the classes s-scrollwrapper and s-scrollpane which might be better choices to add the css to enforce hardware acceleration. Then the css would be

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

或

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

希望这也可以帮助您提高iOS5上的速度.

Hope this helps you improving the speed on iOS5 as well.

iPad 3视网膜上的Webapp显示缓慢的屏幕绘制

这篇关于如何在Retina设备的WebView中提高WebApp的滚动性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！