Rendimiento lento de la vista web de Android

Estoy escribiendo un juego con javascript. Esta aplicación se ejecuta bien en mi navegador (rápido), pero tengo algunos problemas para ejecutar que con webview de Android.

  1. El tiempo para iniciar la aplicación tarda 5s o más (creo que es un poco lento, pero tal vez eso es normal?)
  2. En el menú del juego tengo un método como:

    this.showCredits = function() { document.getElementById('core-credits-layer').style.display = 'block'; document.getElementById('core-credits').style.display = 'block'; var parent = this; $.ajax({ url: 'content/credits.html', dataType: 'html', success: function(data, status, response) { var now = new Date(); var s = now.getSeconds()-parent.test.getSeconds(); console.log('success ajax: '+s); document.getElementById('core-credits').scrollTop = 0; document.getElementById('core-credits').innerHTML = response.responseText; console.log('finished'); }, error: function() { console.error('failed fetch credits'); } }); } 

    Así que el registro de la consola ("terminado", última línea en el éxito ()), viene inmediatamente después de hacer clic en el menú "créditos". Pero puede tomar 6s (más o menos) hasta que vea la div # core-créditos. En mi navegador, veo # core-credits inmediatamente después de hacer clic. Pero la segunda vez que haga clic en ese punto de menú me sale la div después de 1-2s. Ahora no lo que es, no lo creo, que es una cosa de caché, porque me meto en el éxito () callback muy rápido.

Lado Java:

  public void onCreate(Bundle savedInstanceState) { requestWindowFeature(Window.FEATURE_NO_TITLE); super.onCreate(savedInstanceState); setContentView(R.layout.main); Context context = this.getApplicationContext(); SharedPreferences wmbPreference = PreferenceManager.getDefaultSharedPreferences(this); boolean isFirstRun = wmbPreference.getBoolean("FIRSTRUN", true); if(isFirstRun) { this.copyAudioFiles(context); } WebView mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); String data = context.getFilesDir().getPath(); mWebView.getSettings().setDatabasePath(data+"data/"+this.getPackageName()+"/databases/"); mWebView.getSettings().setAllowFileAccess(true); mWebView.setWebChromeClient(new WebChromeClient()); String data_root = Environment.getExternalStorageDirectory()+"/" +this.getPackageName(); mWebView.loadUrl("file:///android_asset/www/index.html?system=android&" + "data_root="+data_root); } 

Tengo estos problemas de rendimiento en mi dispositivo de tableta virtual en eclipse y también en mi tableta asus real.

También las animaciones (jquery show ('slow')) son a veces muy lentas o rotas. Por ejemplo (es un juego de cartas), un jugador se convierte en 9 cartas con la animación (lenta), cada 2ª o 3ª vez me dan 3 o 8 cartas pero no 9 ^^.

Todas estas cosas de arriba están funcionando bien en los navegadores como cromo o firefox. Estoy trabajando con Android 4.1.

Activar aceleración de hardware no ayuda. Hay varios mensajes sobre este problema de renderizado con webview, pero sólo con la solución de aceleración de hardware, que no ayudó.

5 Solutions collect form web for “Rendimiento lento de la vista web de Android”

Olvídese de aceleración HW en este caso – es un amigo falso . En la mayoría de los casos es incluso más lento que la renderización de software.

Pero hay muchas pequeñas cosas que puede optimizar:

Escribir más rápido javascript

  • Utilice siempre el almacenamiento en caché del selector, cuando proceda (debería haber una única ocurrencia de document.getElementById('core-credits') en su código
  • La ejecución de código de grupo / desacoplamiento (véase el siguiente punto o el uso de setTimeout directamente) y la manipulación de DOM (que siempre desencadena redibujos en elementos únicos o, peor aún, un reflujo del documento)
  • En algunas aplicaciones vi buenos resultados usando el requestAnimationFrame Polyfill para dom manipulations – no necesariamente conduciría a un framerate más alto, pero en mi caso me permitió correctamente "lanzar" un mapa de openlayers (en lugar del dispositivo simplemente no reaccionar a la Touchmove)

Sea amigable con Android

  • Al igual que la aplicación intel appframework (anteriormente jqmobi ui), hacer un uso intensivo de css3 transformaciones en lugar de intentar jquery estilo "tick" animaciones
  • Quitar el radio de la frontera y en lugar de utilizar un acercamiento transparente del png
  • Se supone que otras renderizaciones costosas en Android son: (-webkit-)box-shadow , texto-sombra y todo tipo de gradientes (que otra vez se puede cambiar por png de la vieja escuela)

Espero que esto ayude – tratará de elaborar más, resp. Rectificar la información a medida que continúo luchando Android ladera android en mis propias aplicaciones en la actualidad.

Después de haber pasado por el proceso de desarrollo de varias aplicaciones utilizando frameworks Hybrid Mobile App en HTML5 / JS en Android, me temo que no hay una bala de plata que solucione todos los problemas de rendimiento. En términos generales, el rendimiento de Javascript no es el problema, el problema es frecuente y tal vez incluso derroche cambios / modificaciones en el DOM y un exceso de uso de los efectos CSS3 que ralentizan el FPS como cuadro de sombra en Android.

Algo que podría ayudar, es utilizar CrossWalk como su WebView en lugar de la acción WebView componente. Esto significa que puede obtener la última versión de Chrome dentro de su aplicación sin tener que confiar en versiones anteriores del componente WebView del sistema. Debe observar una mejora en el rendimiento y la estabilidad, ya que puede obtener todos los beneficios de las mejoras de software de WebKit.

https://crosswalk-project.org

En segundo lugar, considere el uso de un marco que evita cambios frecuentes en el DOM como React que tiene un DOM virtual.

http://facebook.github.io/react/

React no es el único marco para proporcionar esto y hay otras soluciones que tienen como objetivo proporcionar mejoras de rendimiento en este ámbito como Famous.

http://famous.org

Por último, la elección de sus marcos para construir su aplicación encima de es para mí, el paso más importante. A pesar de toda la inversión en mejorar el rendimiento de los navegadores, todos ellos varían en rendimiento en diferentes áreas, por lo que es mejor cubrir sus apuestas al principio y seleccionar marcos que se adapten al problema que está tratando de resolver.

Apreciar que usted puede haber movido encendido de esto, así que esperando este consejo ayudará a otros.

#lovejavascript, #hatebrowsers

¿Habilitó la accelaración de hardware en su manifiesto ?: http://developer.android.com/guide/topics/graphics/hardware-accel.html ?

Para las animaciones intente agregar esto a los elementos css:

 transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); 

Este ha sido el único speedhack que realmente tuvo un efecto en mi webview. Pero tenga cuidado de no abusar de ella! (Puede leer más sobre el hack en este artículo .)

También recomendaría hacer las animaciones i css

El navegador tiene que repetir el ui en las alteraciones Dom. No nos afecta mucho en los escritorios, pero realmente obstruye las animaciones en los móviles. Usted debe considerar el uso de transiciones css3 ya que son manejados por gpu y son más performant. Si no te importa usar una biblioteca de javascript te recomendaría probar famo.us Afirma ser capaz de dar animaciones de 60fps. Lo que parece ser verdad.

  • Crear un objeto dos veces produce resultados diferentes
  • JavaScript no funciona en Android WebView
  • Técnica fiable para el seguimiento de invitaciones a instalaciones móviles
  • ¿Cómo puedo detectar qué motor javascript (v8 o JSC) se utiliza en tiempo de ejecución en Android?
  • Cómo detectar el pellizco del androide zoom en javascript
  • PhoneGap - Abrir aplicación externa
  • PhoneGap plugin: la forma más rápida de transferir datos JSON a nativo
  • JPlayer jPlayerAndroidFix no funciona?
  • Los oyentes de eventos window.open que no funcionan en Android 4.4.2
  • ¿Por qué el rendimiento WebGL de PhoneGap es diferente de firefox o cromo?
  • Cómo acceder a la bandeja de entrada de sms desde javascript en android (phonegap)
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.