Android WebView: respuesta de botón muy lento

Tengo una pequeña aplicación web que hice para jugar con la funcionalidad WebView de Android.

Tengo algunos divs que uso como botones (con atributos onclick ). Al probar la aplicación (en el navegador del dispositivo), inmediatamente noté una gran cantidad de retraso después de tocar un botón. El intervalo se interrumpe cuando toco el botón y cuando el navegador muestra el resaltado naranja a su alrededor.

Hice algunas pruebas y obtuve algo de información:

  • JavaScript no es el problema. Desvinculaba todos mis scripts y borraba todos los atributos onclick . El rendimiento no cambió.
  • CSS3 cosas no es el problema. Me deshice de todos los degradados de lujo, y el rendimiento no cambió.
  • La cantidad de elementos no es el problema. Lo intenté con solo unos pocos elementos en la página, y el rendimiento no cambió.
  • Doctype y meta cosas no es el problema. Me aseguré de estar usando lo que recomienda Android.

Realmente no sé por qué hay tanta demora. Eliminé todo lo que podría causarlo, pero nada me ayudó.

¿Me estoy perdiendo de algo?

¿Cómo puedo eliminar el retraso después de tocar un botón?

Básicamente, los eventos de clic en los navegadores móviles se retrasan en 300 ms. ¿Conoces el patrón de botón rápido? Básicamente puede usar el evento touchstart (que se dispara sin demora).

Aquí hay una explicación completa: http://code.google.com/mobile/articles/fast_buttons.html

Por lo tanto, WebView mantiene cada evento tap para ver si se trata de un evento de doble toque o de movimiento táctil. Existe una alternativa al enlace a eventos de inicio táctil. Si especifica con la meta directiva de la ventana gráfica que su WebView no debe acercarse o alejarse, los eventos táctiles llegarán a su código inmediatamente (desde Gingerbread).

Puede encontrar los detalles en la directiva de viewport aquí: http://developer.android.com/guide/webapps/targeting.html

intente insertar en el código html

y hacer clic rápido, hacer clic, hacer clic, ya no es un problema (para mí, 4.2.2 y WebChromeClient)

Como el código de Google es muy complicado, implementé el mío usando Mootools 1.3+:

 Element.Events.touch = { base: 'touchend', condition: function(e) { return ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false; }, onAdd: function(fn) { this.addEvent('touchstart', function(e) { this.valid = true; this.startT = new Date().getTime(); this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; }); this.addEvent('touchmove', function(e) { if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false; }); } }; 

Simplemente coloque este código en su página y ahora use el evento táctil en lugar de hacer clic :

 $('id').addEvent('touch', function() { // your code }); 

Funciona agregando un evento touchend y touchstart, si ocurren en menos de 200ms y el toque no llega demasiado lejos es un toque válido, de lo contrario no.

Funcionó muy bien en 2.2 y 4.0