Se puede decir que el desempeño de JavaScript en el navegador es el problema de usabilidad más importante que los desarrolladores frontales tienen que enfrentar.
Entre las reglas Yslow23 de Yahoo, una de ellas es poner JS en la parte inferior. La razón es que, de hecho, la mayoría de los navegadores usan un solo proceso para procesar múltiples tareas como la interfaz de usuario y actualizar las ejecuciones de JavaScript, y solo se ejecuta una tarea al mismo tiempo. ¿Cuánto tiempo se ejecuta JavaScript? ¿Cuánto tiempo llevará esperar antes de que el navegador esté inactivo para responder a la interacción del usuario?
Desde una perspectiva básica, esto significa que la apariencia de la etiqueta <script> hace que toda la página espere debido a la análisis y la ejecución del script. Independientemente de si el código JavaScript real se ingresa o se contiene en un archivo externo irrelevante, el proceso de descarga de página y análisis de análisis debe detenerse y esperar a que el script complete estos procesos antes de continuar. Esta es una parte esencial del ciclo de vida de la página, porque el script puede modificar el contenido de la página durante el tiempo de ejecución. Un ejemplo típico es la función document.write (), por ejemplo:
La copia del código es la siguiente:
<html>
<Evista>
<title> Ejemplo de script </title>
</ablo>
<Body>
<p>
<script type = "text/javaScript">
document.write ("La fecha es" + (nueva fecha ()). TODATESTRING ());
</script>
</p>
</body>
</html>
Cuando el navegador encuentra una etiqueta <script>, como en la página HTML anterior, es imposible predecir si JavaScript agrega contenido a la etiqueta <p>. Por lo tanto, el navegador se detiene, ejecuta este código JavaScript y luego continúa analizando y traduciendo la página. Lo mismo sucede al cargar JavaScript usando la propiedad SRC. El navegador primero debe descargar el código para el archivo externo, que lleva algo de tiempo, y luego analizar y ejecutar este código. Durante este proceso, el análisis de la página y la interacción del usuario están completamente bloqueados.
Debido a que el script bloquea el proceso de descarga de otros recursos de la página, el método recomendado es: colocar todas las etiquetas <script> tan cerca de la parte inferior de la etiqueta <body> lo más posible para minimizar el impacto en toda la descarga de la página. Por ejemplo:
La copia del código es la siguiente:
<html>
<Evista>
<title> Ejemplo de script </title>
<link rel = "stylesheet" type = "text/css" href = "styles.css">
</ablo>
<Body>
<p> ¡Hola mundo! </p>
<-Ejemplo de posicionamiento de script recomendado->
<script type = "text/javaScript" src = "file1.js"> </script>
<script type = "text/javaScript" src = "file2.js"> </script>
<script type = "text/javaScript" src = "file3.js"> </script>
</body>
</html>
Este código muestra dónde se encuentra la etiqueta <script> recomendada en el archivo HTML. Aunque las descargas de script se bloquean entre sí, la página se ha descargado y se muestra frente al usuario, y la velocidad de ingresar a la página no parecerá demasiado lenta. Esto es lo que mencionó anteriormente para poner JS al fondo.
Además, Yahoo! Crea un "mango federal" para su biblioteca "Yahoo! Interfaz de usuario, YUI", que se implementa a través de su "Red de entrega de contenido (CDN). Cualquier sitio web puede usar una URL de" Mango federal "para indicar qué archivos se incluyen en el paquete de archivos YUI. Por ejemplo, la siguiente URL contiene dos archivos:
La copia del código es la siguiente:
<script type = "text/javascript" src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"> </script>
Esta URL llama a los archivos yahoo-min.js y event-min.js en la versión 2.7.0. Estos archivos son dos archivos separados en el servidor, pero cuando el servidor recibe esta solicitud de URL, los dos archivos se fusionarán y devolverán al cliente. De esta manera, ya no se necesitan dos etiquetas <Script> (se carga un archivo para cada etiqueta), y una etiqueta <script> puede cargarlas. Esta es la mejor manera de incluir múltiples JavaScript externos en las páginas HTML.
Scripts de no bloqueo
Lo anterior es la mejor manera de cargar múltiples scripts de JavaScript en el estado inicial de la página. JavaScript tiende a bloquear ciertos procesos de procesamiento del navegador, como solicitudes HTTP y actualizaciones de interfaz, que son los problemas de rendimiento más significativos que enfrentan los desarrolladores. Mantener los archivos JavaScript cortos y limitar el número de solicitudes HTTP es solo el primer paso para crear una aplicación web receptiva.
Pero como las páginas web grandes con muchos código JS, mantener el código fuente corto no siempre es la mejor opción. Entonces, los scripts sin bloqueo surgieron, lo que necesitamos es agregar gradualmente JavaScript a la página, lo que no bloqueará el navegador hasta cierto punto.
La clave para no bloquear los scripts es cargar el código fuente de JavaScript después de cargar la página, lo que significa que la descarga del código comienza después de que se emite el evento de carga de la ventana.
Explicaciones relacionadas:
El evento de carga de la ventana solo se disparará una vez y solo una vez después de cargar la página.
Window.Onload = function () {} debe esperar a que todo el contenido en la página web se cargue (incluidos todos los archivos asociados de elementos, como imágenes) para ejecutarse, es decir, JavaScript puede acceder a cualquier elemento en la página en este momento.
Los siguientes métodos son:
Scripts diferidos Scripts diferidos
HTML4 define un atributo extendido para la etiqueta <script>: Difer.
Este atributo de diferir indica que el script contenido en el elemento no tiene la intención de modificar el DOM, por lo que el código se puede ejecutar más adelante. El atributo diferido solo es compatible con Internet Explorer 4+ y Firefox 3.5+, y no es una solución ideal de navegador cruzado. En otros navegadores, se ignorará el atributo diferido. Por lo tanto, la etiqueta <script> se procesará de la manera predeterminada normal, lo que significa que causará bloqueo. Si está respaldado por varios navegadores convencionales, esta sigue siendo una solución efectiva.
La copia del código es la siguiente:
<script type = "text/javaScript" src = "file1.js" aplazar> </script>
Una etiqueta <script> con el atributo de diferir se puede colocar en cualquier lugar del documento, y comienza la descarga cuando se analiza hasta que se carga el DOM (antes de que se llame al mango del evento de carga. Cuando se descarga un archivo JavaScript de aplazamiento, no bloquea otros procesos de procesamiento en el navegador, por lo que estos archivos se pueden descargar en paralelo con otros recursos.
Puede usar el siguiente código para probar si el navegador admite el atributo de diferir:
La copia del código es la siguiente:
<html>
<Evista>
<title> script diferir ejemplo </title>
</ablo>
<Body>
<script diferir> alerta ("diferir"); </script>
<script> alerta ("script"); </script>
<script> window.onload = function () {alert ("load");}; </script>
</body>
</html>
Si el navegador no admite diferir, el orden de los cuadros de diálogo emergente es "diferir", "script" y "cargar".
Si el navegador admite diferir, el orden de los cuadros de diálogo emergente es "script", "cargar", "diferir".
Elementos de script dinámicos
DOM nos permite crear dinámicamente casi todo el contenido de documentos de HTML usando JavaScript, y un nuevo elemento <script> se puede crear muy fácilmente a través de DOM estándar:
La copia del código es la siguiente:
1 var script = document.createElement ("script");
2 script.type = "text/javaScript";
3 script.src = "file1.js";
4 document.body.appendChild (script);
El nuevo elemento <Script> Carga el archivo de origen File1.js. Descargue este archivo inmediatamente después de agregar el elemento a la página. El punto clave de esta tecnología es que no importa dónde se inicie la descarga, la descarga y la ejecución del archivo no bloqueará otro procesamiento de página.
Cuando se descarga un archivo utilizando un nodo de script dinámico, el código devuelto generalmente se ejecuta inmediatamente (excepto Firefox y Opera, que esperará a que se ejecute todos los nodos de script dinámicos anteriores).
En la mayoría de los casos, esperamos llamar a una función para implementar la descarga dinámica de los archivos JavaScript. La siguiente función de encapsulación implementa implementaciones estándar e implementaciones de IE:
La copia del código es la siguiente:
function loadScript (url, devolución de llamada) {
var script = document.createElement ("script");
script.type = "text/javaScript";
if (script.readyState) {// es decir
script.onreadystateChange = function () {
if (script.readyState == "cargado" || script.readyState == "completo") {
script.onreadyStateChange = null;
llamar de vuelta();
}
};
}
else {// otros
script.Onload = function () {callback ();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .AppendChild (script);
}
loadScript ("file1.js", function () {// llamar
alerta ("El archivo está cargado!");
});
Esta función acepta dos parámetros: la URL del archivo JavaScript y una función de devolución de llamada que se activa cuando se completa la recepción de JavaScript. La verificación de atributos se utiliza para determinar qué evento monitorear. El último paso es el atributo SRC y agregar el archivo JavaScript al cabezal.
La carga de script dinámico es el patrón más utilizado en descargas de JavaScript sin bloqueo porque puede ser un navegador cruzado y es fácil de usar.
Inyección de script xmlhttprequest script inyección de script xhr
Otra forma de obtener scripts de una manera que no es bloquear es inyectar scripts en la página utilizando el objeto XMLHTTPREQUEST (XHR). Esta técnica primero crea un objeto XHR, luego descarga un archivo JavaScript y luego inyecta el código JavaScript en la página con un elemento dinámico <script>. Mira la demostración:
La copia del código es la siguiente:
var xhr = new xmlhttprequest ();
xhr.open ("get", "file1.js", true);
xhr.OnreadyStateChange = function () {
if (xhr.readyState == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// Verifique el código de estado HTTP
var script = document.createElement ("script");
script.type = "text/javaScript";
script.text = xhr.Responsetext;
document.body.appendChild (script);
}
}
};
XHR.SEND (NULL);
Este código envía una solicitud de obtención de archivos al servidor para obtener archivo1.js. El controlador de eventos OnreadyStateChange verifica si ReadyState es 4, y luego verifica si el código de estado HTTP es válido (200 significa que confirma que la solicitud del cliente ha sido exitosa, 2XX significa una respuesta válida y 304 significa una respuesta en caché). Si se recibe una respuesta válida, se crea un nuevo elemento <Script> y su atributo de texto se establece en la cadena ResponseText recibida del servidor. Hacerlo realmente creará un elemento <script> con código en línea, y una vez que se agrega un nuevo elemento <script> al documento, el código se ejecutará y listo para ser utilizado.
La ventaja de este método es que tiene una buena compatibilidad y puede descargar el código JavaScript que no se ejecuta de inmediato. Dado que el código regresa fuera de la etiqueta <Script>, no se ejecutará automáticamente después de la descarga, lo que le permite posponer la ejecución.
La determinación de este método está sujeta a restricciones homólogas del navegador. Los archivos JavaScript deben colocarse en el mismo dominio que la página y no se pueden descargar desde el CDN (red de entrega de contenido). Por esta razón, las páginas web grandes generalmente no usan tecnología de inyección de script XHR.
Patrón de noblo de no bloqueo recomendado
El método recomendado para cargar una gran cantidad de JavaScript a una página se divide en dos pasos:
El primer paso incluye el código requerido para cargar dinámicamente JavaScript y luego cargar la pieza excepto JavaScript requerida para la inicialización de la página. Esta parte del código es lo más pequeña posible y solo puede incluir la función LoadScript (). Se descarga y se ejecuta muy rápidamente y no causará mucha interferencia a la página.
El segundo paso es usarlo para cargar el resto de JavaScript después de que el código inicial esté listo.
Por ejemplo:
La copia del código es la siguiente:
1 <script type = "text/javaScript" src = "loader.js">
2 </script> <script type = "text/javaScript">
3 LoadScript ("The-Rest.js", function () {
4 Aplicación.init ();
5});
6
7 </script>
Coloque este código antes de la etiqueta de cierre del cuerpo </body>. El beneficio de hacer esto es que primero garantiza que JavaScript se ejecute sin afectar otras partes de otras páginas para mostrar. En segundo lugar, cuando se descarga la segunda parte del archivo JavaScript, todos los DOM necesarios para la aplicación se han creado y están listos para acceder, evitando el uso de procesamiento de eventos adicionales (como Window.Onload) para saber si la página está lista.
Otra opción es incrustar la función LoadScript () directamente en la página, lo que puede reducir la sobrecarga de una solicitud HTTP. Por ejemplo:
La copia del código es la siguiente:
1 <script type = "text/javaScript">
function loadScript (url, devolución de llamada) {
var script = document.createElement ("script");
script.type = "text/javaScript";
if (script.readyState) {// ie script.onreadyStateChange = function () {
if (script.readyState == "cargado" || script.readyState == "completo") {
script.onreadyStateChange = null;
llamar de vuelta();
}
};
} else {// otros
script.Onload = function () {
llamar de vuelta();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .AppendChild (script);
}
loadScript ("The-Rest.js", function () {
Aplicación.init ();
});
</script>
Una vez que se descarga el código de inicialización de la página, también puede usar la función LoadScript () para cargar las funciones funcionales adicionales requeridas por la página.
Presentando una herramienta común, Ryan Grove de Yahoo! Buscar creó la biblioteca LazyLoad (ver: http://github.com/rgrove/lazyload/). LazyLoad es una función de LoadScript () potente. LazyLoad solo tiene aproximadamente 1,5 kb después de la escala. Los ejemplos de uso son los siguientes:
La copia del código es la siguiente:
<script type = "text/javaScript" src = "lazyload-min.js"> </script>
<script type = "text/javaScript">
Lazyload.js ("The-Rest.js", function () {
Aplicación.init ();
});
</script>
Resumen
1. Coloque todas las etiquetas <script> en la parte inferior de la página, cerca de la etiqueta de cierre </body>. Este método asegura que la página se analice antes de ejecutar el script.
2. Empaque los scripts en grupos. Las etiquetas menos <script> en una página, más rápida se cargará y responderá más rápido. Esto es cierto tanto para archivos de script externos como para código en línea.
3. Hay varias formas de descargar JavaScript utilizando métodos que no son de bloqueo:
1). Agregue un atributo de diferir a la etiqueta <script>
2). Crear dinámicamente el elemento <script>, úselo para descargar y ejecutar el código
3). Use el objeto XHR para descargar el código y inyectarlo en la página
A través de la estrategia anterior, el rendimiento real de los internautas que usan el código JavaScript se puede mejorar enormemente.
Libro de referencia "JavaScript de alto rendimiento".