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

我们已经显示的WebView的Web应用程序在Android上，我们有性能问题，在旧的Android平板电脑，我们真的需要处理如何提高JS拖动菜单的性能的WebView在Android

我们正在使用iScroll-lite的JavaScript拖动
我们设置硬件加速为true，设置渲染优先级高和的WebView 允许通过80毫秒间隔

只有一个MOVE触摸事件是否有更多W¯¯电子可以做？
是否有更快的替代iScroll-lite？

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

来源

2012-12-29 Ragnar

你可能会在这里找到一些答案：http://touchpunch.furf.com/ – EliSherer

它可能不是Javascript。 Android WebViews往往会遇到意想不到的性能问题。

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

并且不要使用任何类型的动画GIF。我们的经验是，这（奇怪的是）戏剧性地拖累了表现。

来源

2013-01-01 13:58:40 sebwebdev

我们试图让iScroll在iPad的手机应用程序（2/3）上顺利运行，但我们无法做到这一点。即使所有独立示例运行得非常流畅，也可以获得接近性能的任何地方。我们终于结束了使用-webkit-overflow-scrolling:touch你看过那个吗？我知道你需要这款Android版本，所以我不能说它和iOS6一样好，但在iPad上它像一个魅力。

来源

2013-01-05 03:55:40 olsn

'-webkit-溢出滚动：touch'没有在Android的WebView实现 - 你既不能做一个iframe或其他任何满溢的内容可触摸滚动，只有完整的页面。到目前为止，对于Android来说，需要Js库，如appframework的滚动插件，iScroll，Leo Cai的解决方案或\ * younameit \ * ...以实现触摸滚动。 – Philzen

我的建议是你自己写下拖动。这并不困难。代码的关键部分看起来象下面这样：

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）。你应该阅读示例代码来学习如何编写自己的“拖动”。

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

来源

2013-01-08 02:28:57

可能的话，您可以编写不超过100行的代码来执行高性能拖动。 –

怎么样采用div溢出设置为自动，然后应用此修复程序，这样的元素可以滚动

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-08 03:14:36 Swav

如果你想真正做一个差异，我建议你我的方法：

我做了一个JavaScript可调用的函数来创建另一个WebView（“儿童webvie W“），我会用像一个iframe，与内容填充，所以从JS应用程序，我可以这样做：

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

你必须做一些一次性的工作，stabilish办法comunicate两个网页视图，但你明白了。请在下面找到附件中我的insertWebView函数的来源以获取灵感。

这个改进非常棒，因为那些小巧的iframe-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-12 01:19:00 rupps

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

回答

相关问题