Question

我们在Android上的WebView中显示了一个Web应用程序，我们确实需要处理旧版Android平板电脑的性能问题

我们正在使用iScroll-lite进行javascript拖动
我们将硬件加速设置为true，将渲染优先级设置为高和WebView 仅允许80毫秒间隔内的一个MOVE触摸事件

我们还能做些什么吗？有没有比iScroll-lite更快的替代方案？

我们不知道究竟是什么让它如此缓慢。例如，它可以在手机索尼Erricson上运行1 GHz，512 MB RAM与Android 2.3顺利运行，但在平板电脑Qualcomm 1GHz，512 RAM与Android 4.0你拖延，你实际上必须等待看到任何结果。我在Android版本和屏幕分辨率中看到的唯一区别。

Answer 1

毕竟它可能不是Javascript。 Android WebViews往往会出现意想不到的性能问题。

尝试停用所有不必要的CSS，看看性能是否有所改善。如果是这样，您可以迭代地重新添加CSS样式以找到罪魁祸首。

不要使用任何类型的动画GIF。我们的经验是，这（奇怪的是）会大幅降低性能。

Answer 2

我的建议是你自己写下拖拽。这并不困难。代码的关键部分如下所示：

var yourDomElement = document.getElementById("demoDrag");
yourDomElement.addEventListener("touchstart", function (e) {
    e.preventDefault();
    //todo
});
yourDomElement.addEventListener("touchmove", function (e) {
    //todo: 
});
yourDomElement.addEventListener("touchend", function (e) {
    //todo
});

您可以找到许多示例代码here（例如/assets/www/scripts/novas/framwork/nova.Carousel.js，也就是scroller.js）。您应该阅读示例代码以了解如何编写自己的＆＃34;拖动＆＃34;。

如果您仍然不知道，可以联系our team为您完成任务。我们制作的phonegap应用程序性能非常好。

Answer 3

如果使用div设置为auto，然后应用此修复程序以便可以滚动元素

http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/

短提取物：

function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}

Answer 4

我们已经尝试让iScroll在iPad（2/3）上的phonegap-app中顺利运行，但我们无法实现这一目标。尽管所有独立的例子都非常流畅，但在性能上接近可接受的地方。我们最终结束了使用-webkit-overflow-scrolling:touch你看过那个吗？我知道你需要这个用于Android，所以我不能说它是否像在iOS6上一样好，但在iPad上它就像一个魅力。

Answer 5

如果你想真正有所作为，我建议你采用我的方法：

我做了一个JavaScript可调用的函数，用于创建另一个WebView（“子webview”），我会像iframe一样使用并填充内容，所以从JS应用程序我可以做到：

insertWebView (x,y,w,h,"<div>.......</div>").

你必须做一些一次性的工作来稳定两种网络视图的方式，但你明白了。请在下面找到我的insertWebView函数的来源，以获取灵感。

这种改进很棒，因为那些微小的iframe网页浏览不仅表现得很棒，而且像发光的过度滚动，多点触控（现在它们是不同的网页视图！）等等提供了近乎原生的体验。

我还做了一个扩展，在webview之间使用原生拖放。

可能它在记忆方面效率不高，但就用户体验而言，相信我值得付出努力，一千次。

祝你好运！

public void insertWebView(int code, int x0, int y0, int w, int h, String url, int vertical, String initContent, String params, int alpha, int rot, int screenId) {

        PlasmaWebView webview1 = getWebView(code);

        if (webview1 != null) {
            if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Reusing  webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical+", rot="+rot);
            webview1.setVerticalScrollBarEnabled(vertical == 1);
            webview1.setHorizontalScrollBarEnabled(vertical != 1);
            webview1.move(x0, y0, w, h, Funq.this);
            if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
            webview1.setRotation((float)rot/10);
            webview1.handleTemplateLoad(url, initContent);
            return;
        } 

        if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Insert webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical + " url " + url+" alpha "+alpha+", rot="+rot);

        webview1 = new PlasmaWebView(Funq.this.getBaseContext(), code, vertical==1, useHardware, jvs, screenId);
        if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
        webview1.setRotation((float)rot/10);

        RelativeLayout.LayoutParams p=webview1.createLayout(x0, y0, w, h, Funq.this);
        layerContainer.addView(webview1, p);
        webview1.handleTemplateLoad(url, initContent);
    }

如何在Android上的WebView中提高JS可拖动菜单的性能

5 个答案: