blocks|key|3048806|text|它可能终究不是Javascript。Android+WebViews往往会出现意想不到的性能问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3048807|尝试停用所有不必要的CSS，看看性能是否有所提高。如果是这样，您可以迭代地重新添加CSS样式以定位罪魁祸首。|3048808|并且不要使用任何形式的动画GIF。我们的经验是，这(奇怪的是)会极大地拖累性能。|3048809|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

It might not be the Javascript after all. Android WebViews tend to have quite unexpected performance issues.

Try to deactivate all unnecessary CSS and see if performance improves. If so, you can re-add the CSS styles iteratively to locate the culprit.

And do not use any kind of animated GIFs. Our experience is that this (strangely enough) drags down performance drastically.

blocks|key|205121|text|我们试图让iScroll在iPad(2/3)上的phonegap应用程序中顺利工作，但我们无法做到这一点。在性能上接近可接受的水平，即使所有独立的示例都运行得非常流畅。我们最终使用了-webkit-overflow-scrolling:touch，你研究过这个问题了吗？我知道你在安卓上需要这个，所以我不能说它在安卓上是否和iOS6一样好，但在iPad上它工作得很棒。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|205122|entityMap^0|2J|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

We have tried to get iScroll to work smoothly in a phonegap-app on the iPad(2/3), but we were not able to make that happen. Get anywhere near an acceptable in performance even though all stand-alone examples ran super smooth. We finally ended up using <code>-webkit-overflow-scrolling:touch</code> have you looked into that one yet? I know you need this for Android so I cannot say if it is as good there as on iOS6, but on the iPad it worked like a charm.

blocks|key|2836099|text|我的建议是你自己写拖拽。这并不难。代码的关键部分如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2836100|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
});|code-block|syntax|javascript|2836101|你可以找到许多示例代码here+(例如/assets/www/scripts/novas/framwork/nova.Carousel.js，和scroller.js)。您应该阅读示例代码来学习如何编写自己的“拖动”。|offset|length|2836102|如果您仍然不知道，您可以联系our+team来完成您的任务。我们制作了性能非常好的phonegap应用程序。|2836103|entityMap|0|LINK|mutability|MUTABLE|url|http://cordova.codeplex.com/|1|http://www.novasoftware.com/developer/PhoneGap.aspx?utm_source=stackover&utm_medium=phonegap&utm_term=phonegap&utm_content=cordova&utm_campaign=leo^0|0|0|B|4|0|0|E|8|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

My suggestion is that you write the drag by yourself. It's not difficult. The key part of code looks like below:

<pre><code>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
});
</code></pre>

You can find many sample code <a href="http://cordova.codeplex.com/" rel="nofollow">here</a> (e.g. /assets/www/scripts/novas/framwork/nova.Carousel.js, also the scroller.js). You should read the sample code to learn how to write your own "drag".

If you still have no idea, you can contact <a href="http://www.novasoftware.com/developer/PhoneGap.aspx?utm_source=stackover&amp;utm_medium=phonegap&amp;utm_term=phonegap&amp;utm_content=cordova&amp;utm_campaign=leo" rel="nofollow">our team</a> to finish your task for you. We make phonegap apps with very good performance.

blocks|key|200652|text|如果使用div并将overflow设置为auto，然后应用此修复程序，以便可以滚动元素，那该怎么办？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|200653|http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/|offset|length|200654|简短摘录：|200655|function+touchScroll(id){
++++var+el=document.getElementById(id);
++++var+scrollStartPos=0;

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

++++document.getElementById(id).addEventListener("touchmove",+function(event)+{
++++++++this.scrollTop=scrollStartPos-event.touches[0].pageY;
++++++++event.preventDefault();
++++},false);
}|code-block|syntax|javascript|200656|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

What about using div with overflow set to auto and then applying this fix so that elements can be scrolled

<a href="http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/" rel="nofollow">http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/</a>

Short extract:

<pre><code>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);
}
</code></pre>

blocks|key|2836127|text|如果你真的想有所作为，我建议你我的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2836128|我做了一个JavaScript可调用的函数来创建另一个WebView+(“孩子webview")，我可以像使用Iframe一样使用它并填充内容，所以在JS应用程序中我可以这样做：|2836129|insertWebView+(x,y,w,h,"<div>.......</div>").|code-block|syntax|javascript|2836130|你必须做一些一次性的工作来稳定一种将两个get视图进行通信的方法，但是你明白了。请在附件中找到我的insertWebView函数的源码以获得灵感。|2836131|改进非常棒，因为这些小的iframe-webviews不仅表现出色，而且像发光的overscroll、多点触摸(现在它们是不同的webview！)etc提供了近乎原生的体验。|2836132|我还做了一个扩展，在and视图之间使用本机拖放。|2836133|也许它在内存方面效率不是很高，但就用户体验而言，相信我，这是值得付出的努力，上千次。|2836134|祝好运!|2836135|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+"+%2B+code+%2B+"+at+"+%2B+x0+%2B+","+%2B+y0+%2B+","+%2B+w+%2B+","+%2B+h+%2B+"+vertical+"+%2B+vertical%2B",+rot="%2Brot);
++++++++++++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+"+%2B+code+%2B+"+at+"+%2B+x0+%2B+","+%2B+y0+%2B+","+%2B+w+%2B+","+%2B+h+%2B+"+vertical+"+%2B+vertical+%2B+"+url+"+%2B+url%2B"+alpha+"%2Balpha%2B",+rot="%2Brot);

++++++++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);
++++}|2836136|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

If you want to REALLY make a difference, I'd suggest you my approach:

I did a JavaScript-callable function for creating another WebView ("child webview") that I would use like an Iframe and fill with content, so from the JS application I could do:

<pre><code>insertWebView (x,y,w,h,"&lt;div&gt;.......&lt;/div&gt;").
</code></pre>

You have to do some one-time work to stabilish a way to comunicate both webviews, but you get the idea. Please find below attached the source of my insertWebView function for inspiration. 

The improvement was awesome, as those tiny iframe-webviews not only performed awesome, but stuff like the glowing overscroll, multitouch (now they are different webviews!) etc provided a near-native experience. 

I also did an extension to use native drag and drop between webviews.

Probably it was not very efficient memory-wise, but in terms of user experience believe me it was worth the effort, thousand times.

good luck! 

<pre><code>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&gt;0) &amp;&amp; (alpha&lt;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&gt;0) &amp;&amp; (alpha&lt;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);
 }
</code></pre>

We have a web application shown in WebView on Android and we have performance issue on older Android tablets that we really need to deal with

<ul>
<li>We are using <a href="https://github.com/cubiq/iscroll">iScroll-lite</a> for javascript dragging </li>
<li>We set hardware acceleration to true, set rendering priority to high and the WebView
lets through only one MOVE touch event in 80ms interval</li>
</ul>

Is there anything more we can do? 
Is there maybe some faster alternative to iScroll-lite?

We don't know what exactly makes it so slow. It for example runs on phone Sony Erricson with 1 GHz, 512 MB RAM with Android 2.3 smoothly but on tablet Qualcomm 1GHz, 512 RAM with Android 4.0 you make a drag and you actually have to wait to see any outcome. The only difference I see in Android version and screen resolution.

How to improve performance of JS draggable menu in WebView on Android

Android

我们在安卓上的WebView中显示了一个web应用程序，并且我们在较旧的安卓平板电脑上存在性能问题，我们确实需要解决这些问题我们正在使用进行javascript拖动我们将硬件加速设置为true，将渲染优先级设置为高，并且WebView在80ms间隔内仅允许通过一次移动触摸事件我们还能做些什么吗？有没有比iScroll-...

问如何提高安卓WebView中JS可拖动菜单的性能
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何提高安卓WebView中JS可拖动菜单的性能EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何提高安卓WebView中JS可拖动菜单的性能
EN