Reproducción tardía de la webview de Android

He escrito una aplicación en su mayoría en JS (Mootools) y HTML que se carga en webview en mi aplicación.

Es sólo un archivo html que muestra u oculta partes (elementos) de la página agregando o eliminando una clase nodisplay :

 .nodisplay {display:none} function showPage1() { $$('.pages').addClass('nodisplay'); $('page1').removeClass('nodisplay'); } 

En android 4 (xperia arco y galaxia nota 2) veo una extraña presentación tardía, pero no sé cómo se comportan las versiones anteriores. Cuando ocultar un elemento y mostrar otro, parece correcto al principio pero durante el desplazamiento algunas partes de los elementos antiguos aparecen durante milisegundos y desaparece inmediatamente. Es como el render del área no visible se pospone al momento del dibujo.

Y también alguna vez sólo hacer parpadeos impares durante la ocultación y la demostración.

En cromo en PC no tiene ningún problema. Incluso en el AVD funciona muy fuerte sin ningún parpadeo.

No sé si es un problema de android y si hay alguna forma de superarlo ?!

He intentado android:hardwareAccelerated="false"|"true" , sin efecto. Y también ws.enableSmoothTransition() que no soluciona el problema tampoco.

Aquí está mi "Corregir su aplicación de vista web en una respuesta de pila (primera edición)":

Actuación

Mantenga referencias a los elementos de su página en JS para mejorar el rendimiento. $('.page1') tiene que analizar el DOM cada vez que cambia la página y esto sólo debe ocurrir una vez. Esto también vale para $('.pages') – tiene que escanear y realizar operaciones en múltiples elementos. En su lugar, sugiero que mantenga una referencia de página activa. Tal vez debería verse algo como esto:

 function showPage(page) { // receive active page; page is the jQuery ref to the next page activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page page.removeClass('nodisplay'); // show the page } 

Debe analizar toda la aplicación y solucionar este tipo de problemas. Pueden no parecer una gran cosa, pero estoy seguro de que pueden hacer la diferencia en un sistema operativo móvil, donde los recursos son limitados.

Gestión DOM

Si aún no lo ha hecho, debería utilizar plantillas. Además de ayudarle a administrar su aplicación, las plantillas ayudan a mantener el DOM lo más ligero posible: en lugar de tener 100 elementos de página, puede comenzar con 0 y crearlos al vuelo cuando sea necesario. Para lograr el máximo rendimiento, asegúrese de procesar cada plantilla sólo una vez, antes de procesar, compruebe si la página ya existe en el DOM. Para ver cómo esto afecta a su aplicación sólo google "reflujo del navegador".

Hay un montón de herramientas para este trabajo. Teniendo en cuenta la configuración actual, puede optar por: http://mootools.net/forge/p/template . Estas son algunas otras opciones: http://mustache.github.com/ , http://underscorejs.org/#template , http://api.jquery.com/category/plugins/templates/ .

UI

También muy importante pero muy vasto. Algunas cosas a tener en cuenta:

  • Marcado ligero, semántico y válido
  • Js sólo debe administrar datos y estado. Las animaciones y las actualizaciones de DOM lo retrasarán. Hacer uso del ambiente amigable css3
  • Optimizar las imágenes e intentar utilizarlas sólo como imágenes. Si no puedes evitar esto, los sprites siempre son una buena idea.

Depuración

Puede ser doloroso. He encontrado weinre muy útil: http://people.apache.org/~pmuellr/weinre/docs/latest/ . El try ... catch block rules! Algo para ayudar con la salida logcat: http://jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/ .

En pocas palabras, la webview sigue siendo un ambiente áspero y aunque últimamente se ha convertido en una opción factible, requiere mucho pensamiento y planificación para "hacerlo bien".

Espero que esto ayude.

No sé mucho sobre html con webkit. Pero uno de mi proyecto estaba teniendo los mismos problemas de desplazamiento con retraso en ocultar y mostrar efectos de desplazamiento. Tengo habilitar la aceleración de hardware para la vista web.

Probablemente deberías probar esto .

.nodisplay {height:0; display:none; }

Trabajado aquí

-webkit-transform: translateZ(0); este código también, me ayudó mucho .. -webkit-transform: translateZ(0); Usted puede echar un vistazo a mi código en el que me ayudó .. jquery alternar (mostrar / ocultar) en función del selector

También echa un vistazo al siguiente enlace; http://www.html5rocks.com/en/mobile/optimization-and-performance/

Ajay respuesta me dio una pista de algo que utiliza en otro proyecto para que pueda hacer WebView fondo transparente. Hasta ahora no sabía que el código apaga la aceleración de hardware. He probado esa paz de código en este proyecto y ya no hay renderización tardía. Aunque el desplazamiento de la página no es tan suave como antes, pero es mejor que la reproducción tardía.

Este es el código para arreglar todo esto:

 if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

Por cierto, es como definir android:hardwareAccelerated="false" no afecta a webview !

  • ¿Puedo eliminar el estilo de enlace predeterminado de Android en webview?
  • Volver Navegación en una aplicación Webview de Android
  • Vista web de Android: Mailto no se puede implementar
  • ¿El comportamiento predeterminado de WebView de Android cambió para abrir internamente todos los vínculos?
  • Transiciones de la página siguiente / anterior de WebView
  • WebView lanza Receptor no registrado: android.widget.ZoomButtonsController
  • ¿Qué es baseUrl en la vista web android?
  • Webview no puede cargar archivo html desde la tarjeta sd
  • Abrir un enlace en una vista web en lugar del navegador predeterminado
  • WebView de Android - Interceptar clics
  • ¿Qué diferencia hay entre el uso de WebView y el navegador para la api de vídeo de YouTube?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.