javascript - teclado - Dos formas diferentes de poner el guión en la parte inferior: ¿cuáles son las diferencias?

como se escribe guion bajo en computadora (5)

El primer método significa que la etiqueta del script está codificada. El segundo método agrega dinámicamente una etiqueta del script en la parte inferior de la página con JavaScript. La ventaja del segundo método es que puede agregar lógica adicional si es necesario para modificar la etiqueta de script. Quizás desee cargar un archivo de script diferente en función de la cultura, el navegador o algún otro factor que pueda determinar en JavaScript. El segundo método también hace que el archivo JavaScript se cargue sin bloquear la carga del resto de la página web. En el método uno, la página dejará de cargarse cuando llegue a la etiqueta del script, cargará el archivo JavaScript y luego terminará de cargar el resto de la página. Dado que esta etiqueta se encuentra en la parte inferior de la página, no hace mucha diferencia.

Si está creando una aplicación de la Tienda Windows con JavaScript, se recomienda el primer método, ya que esto permitirá que la aplicación almacene en bytes el archivo JavaScript, lo que hará que se cargue más rápido.

¿Cuáles son las diferencias entre las dos soluciones a continuación? En particular, ¿existe una buena razón para favorecer a 2 sobre 1. (nota: suponga que se conoce el nombre de la secuencia de comandos que se va a cargar. La pregunta es si existe un valor en la creación de una secuencia de comandos mínima para cargar una secuencia de comandos en el lugar indicado situación)

1 - Script en la parte inferior

<html> <body> ... ... <script src=''myScript.js''></script> </body> </html>

2 - Script en la parte inferior carga script externo

<html> <body> ... ... <script> // minimal script to load another script var script = document.createElement(''script''); script.src = ''myScript.js'' document.body.appendChild(script); </script> </body> </html>

Estas dos formas de inicializar un script son básicamente las mismas, aunque no hay razón para usar la segunda forma si puede poner directamente el resultado. Sin embargo, puede ajustar el segundo ejemplo en un método $(document).ready() , por ejemplo, lo que llevaría a una especie de efecto de carga perezosa. Básicamente, esto significa que la página se cargaría primero y, una vez finalizada la carga, cargaría el script. O, por supuesto, puede crear un método que inicialice un determinado script de esta manera. Es útil cuando tienes un script grande que se usa solo en algunas situaciones. Esto evitaría que se cargue a menos que lo necesite, disminuyendo así el tiempo total de carga.

Esto no es una respuesta directa a su pregunta, pero es bueno saberlo independientemente.

El segundo enfoque se utiliza a veces como una alternativa de biblioteca .
Por ejemplo, carga jQuery desde el CDN de Google. Pero, si fallara por alguna razón, cargue jQuery desde su propia copia local.

Así es como el popular HTML5 Boilerplate recomienda hacer esto:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write(''<script src="js/vendor/jquery-1.11.0.min.js"><//script>'')</script>

Una característica importante de la segunda es que permite que el navegador termine de analizar la página inmediatamente, sin esperar a que se cargue el script. Esto se debe a que el primer ejemplo permite que el script use document.write para cambiar el estado de análisis alrededor de la etiqueta <script> , mientras que el segundo no lo hace.

Ahora, sabemos que está en la parte inferior de la página, por lo que no queda ningún contenido importante para analizar, pero esto sigue siendo una diferencia importante. No es hasta que se realiza el análisis que el navegador DOMContentLoaded evento DOMContentLoaded . En el método 1, el evento se dispara después de que el script se carga y ejecuta. En el método 2, el evento se dispara antes de que el script comience a cargarse.

Aquí hay unos ejemplos. En estas demostraciones, un oyente DOMContentLoaded cambia el color de fondo a amarillo. Intentamos cargar un script que tarda 3 segundos en cargarse.

(Edición: Tal vez jsfiddle no era el mejor lugar para alojar estas demostraciones. No muestra el resultado hasta que se carga la secuencia de comandos de carga lenta. Asegúrese de hacer clic en Ejecutar una vez que se cargue, para ver qué sucede).

Elija el enfoque que sea mejor para su aplicación. Si sabe que necesita el script para ejecutarse antes de DOMContentLoaded , vaya con el método 1. De lo contrario, el método 2 es bastante bueno en la mayoría de los casos.

1. Script en la parte inferior.

Cuando use una etiqueta de script "sincrónica", bloqueará el navegador para que no muestre la página hasta que se cargue y ejecute el script. Este método tiene los siguientes efectos:

Independientemente de dónde coloque la etiqueta de secuencia de comandos, el navegador no puede DOMContentLoaded hasta que la secuencia de comandos se descargue y ejecute.
Colocar dicha etiqueta de script en la parte inferior solo garantiza que los navegadores hayan procesado todo el contenido antes de que el script lo bloquee.

2. Script en la parte inferior carga script externo

Cuando se inyecta una etiqueta de secuencia de comandos con JavaScript, se creará una etiqueta de secuencia de comandos "asíncrona" que no bloquea el navegador. Este método tiene los siguientes efectos:

Independientemente de dónde coloque el código JavaScript que genera la etiqueta de script, el navegador lo ejecuta tan pronto como esté disponible sin bloquear la página. El DOMContentLoaded se activa cuando debería; independientemente de si el script ha descargado / ejecutado.

El segundo enfoque tiene las siguientes ventajas:

La secuencia de comandos que inyecta una etiqueta de secuencia de comandos se puede colocar en cualquier lugar, incluido el encabezado del documento.
El script no bloqueará el renderizado.
El evento DOMContentLoaded no espera el script.

El segundo enfoque tiene las siguientes desventajas:

No puede usar document.write en tales scripts. Si lo hace, tales declaraciones podrían borrar el documento limpio.
La ejecución asíncrona no significa que el navegador haya terminado de analizar la página. Mantener el script se ejecuta tan pronto como esté disponible la cláusula.
La orden de ejecución no está garantizada. Ejemplo: si carga "library.js" y "use-library.js" utilizando etiquetas de script inyectadas, es posible que "use-library.js" se cargue y se ejecute antes de "library.js".

Dicho esto, hay otro método para cargar scripts, con tres variaciones:

<script src="myScript.js" async></script> <script src="myScript.js" defer></script> <script src="myScript.js" async defer></script>

Con respecto al trabajo de Steve Souders: propuso 6 técnicas para cargar guiones sin bloquear . Los atributos async y defer introducidos en HTML5 cubren las técnicas Script DOM Element y Script Defer y su compatibilidad con el navegador es más que suficiente para que se preocupe por las otras técnicas.