En primer lugar, quiero hablar sobre la carga y la ejecución de JavaScript. En términos generales, los navegadores tienen dos características principales para la operación de JavaScript: 1) Ejecutar inmediatamente después de la carga, 2) bloqueará el contenido posterior de la página (incluida la representación de la página y otros recursos de descarga) durante la ejecución. Por lo tanto, si se introducen varios archivos JS, entonces para el navegador, estos archivos JS se cargan en serie y se ejecutan secuencialmente.
Debido a que JavaScript puede operar el árbol DOM de los documentos HTML, los navegadores generalmente no descargan archivos CSS en paralelo como descargas paralelas, porque esto es causado por la particularidad de los archivos JS. Entonces, si su JavaScript quiere operar el elemento DOM posterior, básicamente, el navegador informará un error diciendo que el objeto no se puede encontrar. Porque cuando se ejecuta JavaScript, el HTML detrás está bloqueado, y no hay un nodo DOM detrás del árbol DOM. Entonces el programa se informa como un error.
El camino tradicional
Entonces, cuando escribe el siguiente código en el código:
La copia del código es la siguiente:
<script type = "text/javaScript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
Básicamente, la etiqueta <script> en la cabeza bloqueará la carga de recursos posteriores y la generación de toda la página. He hecho un ejemplo especial, puede ver: Ejemplo 1. Nota: Solo hay una oración en mi alerta. JS: Alerta ("Hello World"), lo que le facilita ver cómo JavaScript bloquea las cosas detrás de él.
Por lo tanto, sabe por qué muchos sitios web ponen a JavaScript al final de la página web, ya sea utilizando eventos como Window.onload o DocMuemt listo.
Además, debido a que la mayoría del código JavaScript no necesita esperar páginas, cargamos funciones de forma asincrónica. Entonces, ¿cómo cargamos asíncronamente?
Document.write Method
Por lo tanto, puede pensar que document.write () puede resolver el problema de no bloquear. Por supuesto, pensará que después de la etiqueta de document.write <script> se puede ejecutar, se pueden ejecutar las siguientes cosas, lo cual es correcto. Esto es cierto para el código JavaScript en la misma etiqueta de script, pero para toda la página, esto aún bloqueará. Aquí hay un código de prueba:
La copia del código es la siguiente:
<script type = "text/javaScript" lenguaje = "javaScript">
función loadjs (script_filename) {
document.write ('<' + 'script lenguaje = "javascript" type = "text/javaScript"');
document.write ('src = "' + script_filename + '">');
document.write ('<'+'/script'+'>');
alerta ("Loadjs () Salida ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (script);
alerta ("Loadjs () terminado!");
</script>
<script type = "text/javaScript" lenguaje = "javaScript">
alerta ("otro bloque");
</script>
¿Cuál crees que es el orden de las alertas? Puedes probarlo en diferentes navegadores. Aquí está la página de prueba que desea cerrar: Ejemplo 2.
Propiedades de diferir y asíncea del script
IE ha admitido etiquetas de diferir desde IE6, como:
La copia del código es la siguiente:
<Script Defer type = "text/javaScript" src = "./ alert.js">
</script>
Para IE, esta etiqueta permitirá que IE descargue los archivos JS en paralelo y mantenga su ejecución hasta que se complete la carga de DOM completa (DOMCONTENTOGLED). Múltiples diferencias <script> también se ejecutará en el orden en que aparecen cuando se ejecutan. Lo más importante es que después de que se agrega diferir a <script>, no bloqueará la representación del DOM posterior. Sin embargo, debido a que esta aplazamiento solo se usa para IE, generalmente se usa menos.
Nuestro HTML5 estándar también agrega un atributo que carga JavaScript asíncronamente: Async. No importa qué valor le asigne, siempre que aparezca, comienza a cargar el archivo JS de forma asincrónica. Sin embargo, la carga de async tendrá un problema grave, es decir, implementa fielmente la "ejecución inmediatamente después de la carga", por lo que no bloquea la representación de la página, no puede controlar el orden y el momento de su ejecución. Puede echar un vistazo a este ejemplo para experimentarlo.
Los navegadores que admiten la etiqueta Async son: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, IE 10+, Opera no lo admite (desde aquí), por lo que este método tampoco es muy bueno. Porque no todos los navegadores pueden hacerlo.
Crear dinámicamente DOM
Este método es probablemente el más utilizado.
La copia del código es la siguiente:
función loadjs (script_filename) {
var script = document.createElement ('script');
script.SetAttribute ('type', 'text/javaScript');
script.setAttribute ('src', script_fileName);
script.setAttribute ('id', 'coolshell_script_id');
script_id = document.getElementById ('coolshell_script_id');
if (script_id) {
document.getElementsBytagName ('Head') [0] .RemoVeChild (script_id);
}
document.getElementsByTagName ('Head') [0] .AppendChild (script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (script);
Este método casi se ha convertido en una forma asincrónica estándar de cargar archivos JS. Para una demostración de este método, consulte: Ejemplo 3. Este método también se reproduce con las cosas JSONP, es decir, puedo especificar un script de fondo (como PHP) para Script SRC, y este PHP devuelve una función JavaScript cuyo parámetro es una cadena JSON, que regresa para llamar a nuestra función de JavaScript predefinida. Puede echar un vistazo a este ejemplo: T.JS (este ejemplo es un pequeño ejemplo de una llamada asíncrona de Ajax que recogí en Weibo antes)
Cargar js asíncronamente a pedido
El ejemplo anterior del método DOM resuelve el problema de la carga asincrónica de JavaScript, pero no resuelve el problema que queremos que se ejecute en el momento en que especificamos. Por lo tanto, solo necesitamos unir el método DOM anterior a un evento determinado.
Por ejemplo:
Vinculado a la ventana. Evento de carga - Ejemplo 4
Debe comparar las diferencias en la ejecución entre el ejemplo 4 y el ejemplo 3. En ambos ejemplos, utilicé especialmente un JavaScript con el código destacado para ver la ejecución del script con el resaltado del código y la ejecución de mi alerta.js. Sabrás la diferencia)
La copia del código es la siguiente:
Window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
Vinculado a un evento específico - Ejemplo 5
La copia del código es la siguiente:
<p style = "cursor: pointer" onClick = "loadjs ()"> Haga clic para cargar alert.js </p>
Este ejemplo es muy simple. Solo cuando haga clic en un elemento DOM, nuestra alerta se cargará.
Más
Sin embargo, vincular a un evento específico parece pasar un poco, porque la descarga real de JS solo se hará al hacer clic, lo que volverá a ser demasiado lento. De acuerdo, aquí tenemos que lanzar nuestro último problema: queremos descargar el archivo JS de forma asincrónica al área local del usuario, pero no ejecutarlo, solo si queremos ejecutarlo.
Sería genial si tuviéramos el siguiente método:
La copia del código es la siguiente:
var script = document.createElement ("script");
script.noExecute = true;
script.src = "alert.js";
document.body.appendChild (script);
// Podemos hacer esto más tarde
script.execute ();
Desafortunadamente, este es solo un sueño hermoso. Hoy nuestro JavaScript sigue siendo relativamente primitivo, y este "sueño JS" aún no se ha realizado.
Por lo tanto, nuestros programadores solo pueden usar Hack para hacerlo.
Algunos programadores usan el tipo de script no estándar para almacenar en caché JavaScript. como:
La copia del código es la siguiente:
<script type = cache/script src = "./ alert.js"> </script>
Porque "caché/script", esto no puede ser analizado por el navegador, por lo que el navegador no puede ejecutar alert.js como javascript, pero tiene que descargar el archivo js, por lo que se puede hacer. Desafortunadamente, WebKit sigue estrictamente los estándares HTML; para tales cosas no reconocidas, las eliminarán directamente y no harán nada. Entonces, nuestro sueño se rompió de nuevo.
Entonces, necesitamos hackearlo un poco más. Al igual que las imágenes de precarga de N hace muchos años, podemos usar la etiqueta de objeto (o la etiqueta de iframe), por lo que tenemos el siguiente código:
La copia del código es la siguiente:
function cachejs (script_filename) {
var cache = document.createElement ('objeto');
cache.data = script_fileName;
Cache.id = "CoolShell_Script_Cache_ID";
cache.width = 0;
Cache.Height = 0;
document.body.appendChild (caché);
}
Luego, llamamos a esta función al final. Consulte el ejemplo relacionado: Ejemplo 6
Presione Ctrl+Shit+I en Chrome, cambie a la página de red y puede ver que Alert.js ha sido descargado pero no se ha ejecutado. Luego usamos el método del ejemplo 5, porque el lado del navegador tiene caché, alert.js ya no se descargará desde el servidor. Por lo tanto, la velocidad de ejecución se puede garantizar.
Debe estar familiarizado con este tipo de precarga. También puede usar métodos AJAX, como:
La copia del código es la siguiente:
var xhr = new xmlhttprequest ();
xhr.open ('get', 'new.js');
xhr.send ('');
No diré más y daré ejemplos aquí. Puedes probarlo tú mismo.
Finalmente, mencionemos dos JS, uno es controles y el otro es Headjs, que se usa especialmente para hacer archivos JavaScript de carga asíncrona.
Ok, este es todo el contenido. Espero que pueda comprender la carga y la ejecución de JavaScript, así como las tecnologías relacionadas después de leerlo. ¡Al mismo tiempo, también espero que todos los expertos frontales te den consejos!