16

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

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

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

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

4

5 回答 5

2

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

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

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

于 2013-01-01T13:58:40.087 回答
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
});

您可以在此处找到许多示例代码（例如 /assets/www/scripts/novas/framwork/nova.Carousel.js，还有 scroller.js）。您应该阅读示例代码以了解如何编写自己的“拖动”。

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

于 2013-01-08T02:28:57.173 回答
2

使用 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);
}
于 2013-01-08T03:14:36.980 回答
1

我们试图让 iScroll 在 iPad (2/3) 上的 phonegap 应用程序中顺利工作，但我们无法做到这一点。尽管所有独立示例都运行得非常流畅，但性能仍接近可接受的水平。我们终于使用-webkit-overflow-scrolling:touch了，你研究过那个了吗？我知道你在 Android 上需要这个，所以我不能说它是否像在 iOS6 上一样好，但在 iPad 上它就像一个魅力。

于 2013-01-05T03:55:40.750 回答
0

如果您真的想有所作为，我建议您使用我的方法：

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

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

你必须做一些一次性的工作来稳定一种通信两个 webview 的方式，但你明白了。请在下面找到我的 insertWebView 函数的来源以获得灵感。

改进非常棒，因为这些微小的 iframe-webview 不仅表现出色，而且像发光的过度滚动、多点触控（现在它们是不同的 webviews！）等提供了接近原生的体验。

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

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

祝你好运！

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);
    }
于 2013-05-12T01:19:00.230 回答