style div bootstrap attribute javascript google-chrome attributes

javascript - div - Atributo diferido(Chrome)



html title attribute (3)

¿Qué significa defer y async ?

Por defecto, una etiqueta <script src=...></script> es malvada. El navegador debe detener el análisis del HTML hasta que se haya descargado y ejecutado el script (ya que el script podría llamar a document.write(...) o definir variables globales de las que dependen los scripts posteriores). Esto significa que las imágenes y hojas de estilo que están detrás de la etiqueta del script no comienzan a descargarse hasta que el script haya terminado de descargarse y ejecutarse. Los scripts externos normalmente hacen que la carga web sea mucho más lenta, por lo que NoScript se ha vuelto tan popular.

Microsoft introdujo defer para resolver el problema. Si usa <script defer src=...></script> , promete no llamar a document.write(...) . Una secuencia de comandos externa diferida comenzará a descargarse de inmediato, pero no se ejecutará hasta después de que se haya procesado la página. Después de que la página haya procesado, todos los scripts de defer se ejecutan en el mismo orden en que fueron declarados. No todos los navegadores implementan el defer todavía.

HTML5 introdujo el atributo async que puede ejecutarse en cualquier momento, posiblemente antes de que la página haya terminado de analizarse o incluso antes de otras secuencias de comandos async / async que aún se están descargando. Pero es más difícil usar múltiples scripts async porque su orden de ejecución no está garantizada. Al igual que el defer , no todos los navegadores implementan la async todavía.

Después de que se hayan ejecutado todas las secuencias de comandos de defer y async , se DOMContentLoaded y se load eventos.

Una breve historia de defer y async

  • 1997 IE 4 introduce defer .
  • La defer 1998 defer , pero desafortunadamente no dice exactamente cuándo se ejecutan las secuencias de comandos diferidas (¿Todo en orden? ¿Antes de onload ?). Por lo tanto, ningún otro explorador implementa el defer porque nadie desea aplicar ingeniería inversa al comportamiento de IE o romper scripts que podrían depender de las peculiaridades de IE. (Consulte la solicitud de características de Mozilla , por ejemplo).
  • El borrador de HTML5 de 2006 finalmente describe los detalles necesarios para implementar el defer : los guiones de defer deberían ejecutarse en orden una vez que se haya analizado el resto de la página y antes de la onload . También introduce async para especificar scripts que se pueden ejecutar cada vez que se descargan sin tener que esperar el uno al otro. Desafortunadamente, HTML5 contradice IE al no permitir secuencias de comandos de defer línea. Esto rompe la invariante de que todos los scripts defer se ejecutan en orden (si algunos scripts defer tienen src y algunos tienen contenido en línea).
  • 2009 Gecko 1.9.1 (Firefox 3.5) admite defer .
  • 2010-01 Gecko 1.9.2 (Firefox 3.6) admite async .
  • 2010-09 defer y async se registran en Webkit . Debería verlo en Chrome y Safari muy pronto (ya está en el canal de desarrollo de Chrome, pero tiene un poco de errores).
  • Todavía estamos esperando que Opera implemente el defer y la async y que IE implemente la async .

Entonces, ¿qué debería usar un desarrollador web?

No hay una sola regla a seguir en este momento. Debe elegir la solución que mejor equilibre la simplicidad, la latencia de procesamiento de páginas y la latencia de ejecución de scripts para el conjunto de navegadores que acceden a su sitio web.

  • La forma más sencilla de hacer que la página se renderice antes de que se ejecuten los scripts, como han señalado otros, es colocar los scripts en la parte inferior de la página. Pero si los scripts son esenciales o la página web contiene muchos HTML, entonces debe colocar los scripts más arriba en la página.
  • Si su script es independiente y sus clientes usan IE o nuevas versiones de Firefox, use <script async defer src=...></script> : Esto permite que la renderización continúe en paralelo a la descarga de scripts para IE y los navegadores HTML5 más nuevos, pero hace que los navegadores pre-HTML5 (incluidas todas las versiones de Opera) bloqueen.
  • Si un script externo depende de otro, márquelos defer (pero no async ) y se ejecutarán en el orden en que fueron declarados (excepto IE <= 9 en ciertas condiciones puede ejecutarlos fuera de servicio ). De nuevo, esto permite que la representación continúe en paralelo a la descarga de scripts en IE y Gecko / Webkit compatible con HTML5, pero los navegadores más antiguos y Opera sufrirán. Es una buena idea utilizar defer incluso si los guiones están en la parte inferior de la página para que se descarguen en paralelo.
  • Nunca utilice defer para scripts en línea porque el borrador de HTML5 le ha quitado la garantía de orden de ejecución.
  • Si su público incluye muchos usuarios de Opera o antiguos Firefox / Safari, el siguiente fragmento ejecutará el script después de analizar el documento en la mayoría de los navegadores anteriores a HTML5 (IE, Webkit, es necesario probar Firefox antiguo), mientras se inician los navegadores HTML5 más recientes. descargando de inmediato pero no se bloqueará para ejecutar el script debido al atributo async . En otras palabras, la mayoría de los navegadores más antiguos lo tratan como un script en la parte inferior de la página, y los navegadores más nuevos reconocen la async . Pero los usuarios de Opera obtienen lo peor de ambos mundos, ya que Opera comienza la ejecución de inmediato y no entiende la async . Este es el patrón recomendado por Google Analytics para el erizo en muchas páginas web.

retazo:

<script> (function() { var script = document.createElement(''script''); script.src = ''...''; script.async = true; var s = document.getElementsByTagName(''script'')[0]; s.parentNode.insertBefore(script, s); })(); </script>

  • Si otra secuencia de comandos depende de la primera secuencia de comandos para cargar, puede utilizar el mismo patrón que el anterior, pero escuche el evento de carga del primer elemento de secuencia de comandos antes de ejecutar la segunda secuencia de comandos. Consulte el ejemplo de LABjs sobre cómo esperar a que se cargue otro script .
  • Si tiene varias secuencias de comandos con dependencias complicadas, use LAB.js o el cargador YUI para que se descarguen en paralelo y se ejecuten en algún orden válido.
  • Si está utilizando una biblioteca popular como jQuery, considere usar la copia de Google en lugar de la suya para aumentar la probabilidad de que el navegador ya lo haya almacenado en la memoria caché.

Actualización : si tiene secuencias de comandos divididas en módulos y desea mejorar el rendimiento, le recomiendo el capítulo "Combinación de scripts asincrónicos" de Even Faster Web Sites de Steve Souder. Contiene consejos / trucos no solo para controlar el orden de ejecución sino también para retrasar el análisis de los scripts para mejorar el rendimiento.

Chrome for me siempre ha sido una referencia en los estándares web, desafortunadamente el defer no es compatible y IE lo admite desde la versión 5.5. Por qué ?

js.js

document.getElementById ("hi").innerHTML = "Hi :)";

HTML

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <script defer="defer" src="js.js"></script> <title>Hi</title> </head> <body> <div id="hi"></div> </body> </html>

Si los scripts se pueden diferir, también se pueden mover al final de la página (como lo señala @Christian en los comentarios)

Esta sería una mejor opción en términos de rendimiento, ya que no bloqueará la carga del resto de la página. Puede colocar sus scripts antes de la etiqueta </body> .

Este atributo no está bien soportado por los principales navegadores, esto en sí mismo debería ser una pista para dejar de usarlo.

defer solo es compatible con Internet Explorer. no necesitas confiar en eso. hay otras formas de obtener el mismo efecto, como ubicar los scripts al final de la página justo antes de la etiqueta </body> , como han señalado otros.

El objetivo del aplazamiento es indicar al script vinculado externamente que espere hasta que la página termine de cargarse hasta que se ejecute. Lo mismo se puede lograr a través de buenos métodos JavaScript discretos, que generalmente incluyen código que impide que los scripts se ejecuten hasta que el DOM termine de cargarse.

La ventaja del aplazamiento se produce en conexión con Internet Explorer, ya que ese navegador es el único que admite el atributo defer. Entonces, si necesita una secuencia de comandos rápida para ejecutar solo en IE, y no le importa si la página completa se carga antes de que comience a ejecutarse, simplemente agregue defer = "defer" en su etiqueta y eso lo solucionará rápidamente. problema. La reparación de un problema PNG transparente en IE6 es un posible uso práctico para diferir.

El atributo defer se debe usar cuando se oculta un script de otros navegadores con un comentario condicional que se dirige a un script solo de IE; de lo contrario, el script se ejecutará normalmente en otros navegadores.)

Referencia: http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/