javascript - pagina - Considere marcar el controlador de eventos como ''pasivo'' para que la página sea más receptiva

lista de eventos javascript

Question

Estoy usando un martillo para arrastrar y se está volviendo entrecortado al cargar otras cosas, como me dice este mensaje de advertencia.

El manejo del evento de entrada ''touchstart'' se retrasó por X ms debido a que el subproceso principal está ocupado. Considere marcar el controlador de eventos como ''pasivo'' para que la página sea más receptiva.

Así que traté de agregar ''pasivo'' al oyente así

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

pero sigo recibiendo esta advertencia.

Answer 1

Encontré una solución que funciona en jQuery 3.4.1 slim

Después de desminificar, agregue {passive: true} a la función addEventListener en la línea 1567 de la siguiente manera:

t.addEventListener(p, a, {passive: true}))

Nada se rompe y las auditorías de los faros no se quejan de los oyentes.

Answer 2

Para aquellos que reciben esta advertencia por primera vez, se debe a una característica innovadora llamada Passive Event Listeners que se implementó en los navegadores recientemente (verano de 2016). Desde https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Los oyentes de eventos pasivos son una nueva característica en la especificación DOM que permite a los desarrolladores optar por un mejor rendimiento de desplazamiento al eliminar la necesidad de desplazarse para bloquear los oyentes de eventos táctiles y de rueda. Los desarrolladores pueden anotar oyentes táctiles y de rueda con {pasivo: verdadero} para indicar que nunca invocarán preventDefault. Esta característica se envió en Chrome 51, Firefox 49 y aterrizó en WebKit. https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Ver también: ¿Qué son los oyentes de eventos pasivos?

Puede que tenga que esperar a que su biblioteca .js implemente el soporte.

Si está manejando eventos indirectamente a través de una biblioteca de JavaScript, puede estar a merced del soporte de esa biblioteca en particular para la función. A partir de agosto de 2016, no parece que ninguna de las principales bibliotecas haya implementado el soporte. Algunos ejemplos:

• jQuery.js - problema en curso: https://github.com/jquery/jquery/issues/2871
• React.js - problema en curso: https://github.com/facebook/react/issues/6436
• Hammer.js - problema en curso: https://github.com/hammerjs/hammer.js/pull/987
• barra de desplazamiento perfecta : problema continuo: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - problema en curso: https://github.com/angular/angular.js/issues/15901

Answer 3

esto esconde el mensaje

    jQuery.event.special.touchstart = 
    {
      setup: function( _, ns, handle )
      {
        if ( ns.includes("noPreventDefault") ) 
        {
          this.addEventListener("touchstart", handle, { passive: false });
        } 
        else 
        {
          this.addEventListener("touchstart", handle, { passive: true });
        }
      }
    };