y $(documento).listo

4 minutos de lectura

y documentolisto
Todos los trabajadores son esenciales

De acuerdo a http://caniuse.com/script-defer, la mayoría de los navegadores admiten la script etiquetas defer atributo.

Me gustaría saber si los scripts especificados por <script defer src="https://stackoverflow.com/questions/8638551/..."> ser ejecutado antes o después de jQuery $(document).ready()? ¿Los principales navegadores modernos (Chrome, Firefox, IE, etc.) son consistentes en el orden de ejecución o varía?

y documentolisto
Telmo Marqués

Basado en esto violín Tengo que decir jQuery $(document).ready() ejecuta después un script declarado con defer. Lo probé con Firefox y Chrome, y ambos tenían el mismo comportamiento independientemente de la secuencia de los scripts.

Supongo que el comportamiento en otros navegadores puede cambiar según su implementación, por lo que siempre es incierto.

EDITAR: Resulta que el defer El atributo debe usarse con un archivo javascript externo. Edité el violín para mostrar esto, aparentemente con los mismos resultados.

Violín actualizado aquí: http://jsfiddle.net/RNEZH/15/

  • El mismo resultado en Opera, pero ¿no es el atributo diferido solo interesante para scripts externos? No creo que tenga sentido.

    – Bergi

    26 dic. 11 a las 19:52


  • @TomS: Especificaciones dice “Los atributos defer y async no deben especificarse si el atributo src no está presente”. Se trata de continuar analizando el documento o no, en lugar de esperar con la ejecución.

    – Bergi

    26 dic. 11 a las 20:04

  • Obtuve los mismos resultados con tu violín en IE6, por lo que IE6+ también debería funcionar.

    – Todos los trabajadores son esenciales

    27 dic. 11 a las 16:10

  • Esto supone que has diferido jQuery, ¿verdad? Creo que el violín hace una carga jQuery síncrona, luego tu aplazamiento, el ready().

    – Karl Kieninger

    18 nov. 14 a las 15:46

  • Hubiera estado de acuerdo con usted antes de hoy, pero descubrí que si agrega latencia a una secuencia de comandos (usando fiddler, por ejemplo, para hacer que una secuencia de comandos tarde 2 segundos), el evento jquery ready ocurre antes de que se cargue la secuencia de comandos diferida (solo probado en Chrome). Parece que puedes usar $(window).on("load", initFunc) que se ejecutará initFunc después de guiones diferidos. Desafortunadamente, esto no es lo ideal, ya que creo que la ventana en el evento de carga se activa después de que se cargan las imágenes, etc.

    – sam

    03 jul.


El atributo defer tiene una buena redaccion y analisis. también Consulte los comentarios de la publicación para obtener información adicional sobre cómo defer ha sido redefinido en HTML5.

Mi conclusión: defer es demasiado dependiente del navegador para contar con él. Por lo tanto, utilice la técnica jQuery doc ready.

Para decirlo de otra manera, una razón importante para jQuery es cubrir las inconsistencias del navegador. Defer es otra inconsistencia que debe evitarse en las páginas bien escritas.

  • No veo ningún comentario en ninguna parte que tenga información sobre cómo se ha redefinido el aplazamiento en HTML5.

    – nilskp

    23 ago.

y documentolisto
Mohamed Usman

Simplemente, script debe ejecutarse antes $(document).ready() ya sea defer se usa o no y casi todos los principales navegadores apoyo defer.

Pero por estar seguros te animo a usar ambos $(document).ready() y defer. Entonces por qué defer? Debido a que ayuda a que la página aparezca rápidamente (ya que el script externo se carga en paralelo) y es un factor realmente importante en la herramienta de velocidad de página de Google, se puede encontrar un buen detalle aquí http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS

  • Esta información no es correcta, el documento listo se está llamando incluso si el jquery con el parámetro diferido aún no está cargado

    – Radek

    21 jun.

Para diferir el javascript en línea, puede usar type=”module” que luego hace que $(document).ready() sea redundante.

<script type="module">alert('defered inline js')</script>

Porque type=”module” implica que los scripts diferidos se ejecutarán en orden con otros scripts diferidos.

Vea si puedo usar el 92 % de soporte del navegador en septiembre de 2020.
https://caniuse.com/es6-module

He observado una condición de carrera en versiones anteriores a la 3.0 de jQuery, en Chrome (88.0.4324.96). No veo esto en Safari ni en Firefox.

<body>
  <script defer src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script defer src="test.js"></script>
</body>

prueba.js:


jQuery(document).ready(function ($) {
  console.log('jQuery version', $().jquery);
  console.log(a);
});

const a="OK";

Esto falla con Cannot access 'a' before initialization alrededor del 10% del tiempo en mi experiencia.

Una vez que actualizo a jQuery 3, no puedo reproducir. Como esta es una condición de carrera, no puedo estar 100% seguro, pero me parece bastante concluyente.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad