Una parte importante del ciclo de desarrollo de Microsoft es ajustar el rendimiento del producto. El ajuste del rendimiento es también una de las áreas clave a las que los desarrolladores deben prestar atención. Después de años de desarrollo, la industria ha aprendido mucho sobre cómo optimizar el rendimiento de los programas Win32.
Uno de los problemas que enfrentan los desarrolladores hoy en día es que no comprenden muy bien qué causa que las páginas DTHML y HTML se ejecuten rápido o lento. Por supuesto, existen algunas soluciones sencillas, como no utilizar imágenes de 2 MB. Hemos utilizado algunas otras técnicas interesantes para mejorar el rendimiento de las páginas DHTML. Esperamos que puedan ayudarle a mejorar el rendimiento de sus propias páginas.
Aquí utilizo un ejemplo de un programa para crear una tabla. Los métodos document.createElement() y element.insertBefore() se utilizan para crear una tabla con 1000 filas (Row). Cada fila tiene una columna (Celda). El contenido contenido en la Celda se llama "Texto". ¿Qué tan malo podría ser este código? ¿Cuánto margen de ajuste tiene un programa tan pequeño? Por favor vea la introducción.
Al principio, escribí un programa que pensé que sería rápido. Traté de evitar algunos problemas de bajo nivel, como no definir variables explícitamente o usar VBScript y JavaScript al mismo tiempo en una página. El programa es el siguiente:
<html>
<cuerpo>
<guión>
var tbl, tbody, tr, td, texto, i, máx;
máx = 1000;
tbl = document.createElement("TABLA");
tbl.border = "1";
tbody = document.createElement("TBODY");
tbl.insertBefore(tbody, nulo);
document.body.insertBefore(tbl, nulo);
para (i=0; i<máx; i++) {
tr = documento.createElement("TR");
td = documento.createElement("TD");
texto = documento.createTextNode("Texto");
td.insertBefore(texto, nulo);
tr.insertBefore(td, nulo);
tbody.insertBefore(tr, nulo);
}
</script>
</cuerpo>
</html>
Ejecute este programa en una máquina PII233/64 MB de memoria/NT4.0/IE5.0. La página se carga desde esta máquina. El tiempo desde que se inicia la carga de la página hasta que la página se silencia por completo (se han ejecutado todos los eventos y se ha completado la visualización de la pantalla) es 2328 milisegundos, que también es la base de esta prueba (la llamo Prueba1).
En esta página, una operación que requiere mucho tiempo es hacer referencia con frecuencia a objetos globales, como "documento", "cuerpo", "ventana", etc. Hacer referencia a todas estas variables globales similares es mucho más costoso que hacer referencia a una variable local.
Entonces hice el primer intento de mejora: almacenar en caché (Caché) document.body en la variable local "theBody":
agregué el siguiente código:
var theBody = document.body;
Luego modifique esta línea:
document.body.insertBefore(tbl, null);
Cámbielo a:
theBody.insertBefore(tbl, null);
Vea la segunda muestra.
Esta modificación no afectó mucho el tiempo total, solo acortó 3 ms. Pero se ha demostrado que si también hay un objeto document.body en el bucle y se modifica su referencia, los beneficios serán considerables.
Posteriormente, almacené en caché el objeto del documento; en nuestra prueba, se hizo referencia al objeto del documento un total de 3002 veces. El código modificado es el siguiente:
<html>
<cuerpo>
<guión>
var tbl, tbody, tr, td, texto, i, máx;
máx = 1000;
var theDoc = documento;
var elCuerpo = elDoc.body;
tbl = elDoc.createElement("TABLA");
tbl.border = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, nulo);
theBody.insertBefore(tbl, nulo);
para (i=0; i<máx; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
texto = theDoc.createTextNode("Texto");
td.insertBefore(texto, nulo);
tr.insertBefore(td, nulo);
tbody.insertBefore(tr, nulo);
}
</script>
</cuerpo>
</html>
Vea el tercer ejemplo.
Este tiempo de ejecución es de solo 2100 ms, lo que ahorra aproximadamente el 10 % del tiempo. El uso de variables locales en lugar de hacer referencia directa al objeto del documento ahorró un promedio de 0,4 milisegundos cada vez.
Una forma común de optimizar el rendimiento es establecer el atributo "diferir" en la etiqueta <SCRIPT> cuando no es necesario ejecutar el script inmediatamente. (El script inmediato no está contenido en un bloque de funciones, por lo que se ejecutará durante el proceso de carga). Después de configurar el atributo "diferir", IE no tiene que esperar a que el script se cargue y se ejecute. De esta manera la página se cargará más rápido. En términos generales, esto también significa que los scripts inmediatos se colocan mejor en bloques de funciones y manejan la función en el controlador de carga del documento u objeto del cuerpo. Esta propiedad es útil cuando hay algunos scripts que deben ejecutarse en función de las acciones del usuario, como hacer clic en un botón o mover el mouse a un área determinada. Pero cuando hay algunos scripts que deben ejecutarse durante o después de cargar la página, los beneficios de utilizar el atributo aplazar no son grandes.
La siguiente es la versión modificada del código que utiliza el atributo aplazar:
<html>
<cuerpo onload="init()">
<guión aplazado>
función inicio() {
var tbl, tbody, tr, td, texto, i, máx;
máx = 1000;
var theDoc = documento;
var elCuerpo = elDoc.body;
tbl = elDoc.createElement("TABLA");
tbl.border = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, nulo);
theBody.insertBefore(tbl, nulo);
para (i=0; i<máx; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
texto = theDoc.createTextNode("Texto");
td.insertBefore(texto, nulo);
tr.insertBefore(td, nulo);
tbody.insertBefore(tr, nulo);
}
}
</script>
</cuerpo>
</html>
Vea la cuarta muestra.
El tiempo de esta prueba es 2043 ms. Este es un aumento del 12% en relación con la prueba de referencia y un 2,5% más que la prueba anterior.
Un método de mejora del que hablamos a continuación es muy útil, por supuesto, pero un poco más problemático. Cuando necesita crear un elemento y luego insertarlo en una estructura similar a un árbol, es más eficiente insertarlo directamente en el tronco, en lugar de insertarlo primero en un subárbol grande y luego insertar el subárbol grande en el tronco. Por ejemplo, si crea una tabla con una columna en cada fila y algo de texto en la columna, puede hacer esto:
1. Crear <TR>
2. Crear <TD>
3. Crear un nodo TextNode
4. Insertar TextNode en <TD >
5 Insertar <TD> en <TR>
6. Insertar <TR> en TBODY
Cuando sea más lento que el siguiente método:
1. Crear <TR>
2. Crear <TD>
3. Crear TextNode
4. Insertar <TR>. Insertar en TBODY
5. Insertar <TD> en <TR>
6. Insertar TextNode en <TD>
Las cuatro pruebas anteriores utilizan el método anterior. Utilizamos el último método para la quinta prueba. El código es el siguiente:
<html>
<cuerpo onload="init()">
<guión aplazado>
función inicio() {
var tbl, tbody, tr, td, texto, i, máx;
máx = 1000;
var theDoc = documento;
var elCuerpo = elDoc.body;
tbl = elDoc.createElement("TABLA");
tbl.border = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, nulo);
theBody.insertBefore(tbl, nulo);
para (i=0; i<máx; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
texto = theDoc.createTextNode("Texto");
tbody.insertBefore(tr, nulo);
tr.insertBefore(td, nulo);
td.insertBefore(texto, nulo);
}
}
</script>
</cuerpo>
</html>
Ver la quinta muestra.
Test5 solo toma 1649 ms. Esta es una mejora del 25% con respecto a la última prueba y casi un 30% más rápido que la línea de base.
Las modificaciones posteriores se realizaron utilizando hojas de estilo prediseñadas. El ancho de columna de una tabla que utiliza una hoja de estilo prefabricada o se establece mediante la etiqueta <COL>. Cuando no hay una etiqueta <COL>, el ancho de cada columna se distribuye uniformemente. Como no es necesario volver a calcular el tamaño de cada columna, etc., el uso de una hoja de estilos mejora el rendimiento, especialmente cuando el número de columnas de la tabla es grande.
El código para agregar una hoja de estilos (CSS) es muy simple, el siguiente:
tbl.style.tableLayout = "fixed";
Vea el sexto ejemplo.
Debido a que la tabla de nuestra prueba solo tenía una columna, este cambio solo mejoró el rendimiento de la página en un 1,6 %. Si hay más columnas, el aumento de rendimiento será aún mayor.
Las dos últimas pruebas cambiaron la forma en que se inserta el texto en la tabla. En las pruebas anteriores, primero creamos un TextNode y luego lo insertamos en el TD. En cambio, en Test7, especificamos el texto incluido a través de InnerText. El código modificado es:
td.innerText = "Texto";
Vea la séptima muestra
Sorprendentemente, la diferencia que hizo esta modificación fue enorme: una mejora del rendimiento del 9 % con respecto a la última vez y una mejora total del rendimiento del 36 % con respecto al original. El tiempo va desde los primeros 2323 ms hasta los últimos 1473 ms.
Ahora, casi todo el mundo sabe que usar element.innerHTML es muy lento. Para ver qué tan lento es, hice una última prueba: insertar texto usando InnerHTML en lugar de InnerText. Esto reduce enormemente el rendimiento. El tiempo alcanzó los 3375 ms, un 80% más lento que la última prueba y un 45% más lento que la prueba inicial. Obviamente, internalHTML requiere mucho tiempo.
Ajustar el rendimiento de una página HTML es similar a ajustar el rendimiento de una aplicación Win32; necesita saber qué es lento y qué es rápido; Espero que estos métodos puedan ayudarle a mejorar el rendimiento de la página.