Un conjunto de técnicas para acelerar DHTML
Autor：Eve Cole
Fecha de actualización：2009-06-20 16:59:57
¿HTML dinámico (DHTML) en Microsoft? En Internet Explorer 4.0
Introducido para poner nuevos modelos de programación a disposición de autores y desarrolladores web. Desde entonces, los autores web han
Aproveche al máximo esta poderosa característica para proporcionar contenido, estilo y posicionamiento dinámicos para que los usuarios de la web puedan
Experimente ricas funciones interactivas. La flexibilidad de DHTML significa que normalmente hay múltiples formas de implementar
Tu idea. Comprender cómo se procesan los componentes de visualización y análisis HTML de Internet Explorer.
para ayudarle a determinar la mejor manera de realizar el trabajo. Este artículo describe algunas de las funciones de DHTML.
impacto significativo en el rendimiento y proporciona algunos consejos para mejorar el rendimiento de la página.
Cambios DHTML por lotes
En las páginas web DHTML, la forma más eficaz de mejorar el rendimiento es mejorar la
Cambios de contenido. Hay varias formas de actualizar una página web, lo cual es importante comprender. Congke
A juzgar por los comentarios de los usuarios, los autores web pueden utilizar bloques de texto HTML o DHTML.
Modelo de objetos (inglés) o Modelo de objetos de documento (DOM) del W3C (inglés) para acceder a HTML individual
elemento. Siempre que cambia el contenido HTML, el análisis y visualización HTML de Internet Explorer
Todos los componentes de visualización deben reorganizar la representación interna de la página, recalcular el diseño del documento y el documento.
transmitir y mostrar estos cambios. Aunque el rendimiento real está determinado por el contenido de la página web y los cambios que realice
, pero estas operaciones son relativamente caras. Si utiliza bloques de texto HTML en lugar de individuales
Para acceder al elemento, se debe llamar al analizador HTML, lo que provocará una sobrecarga de rendimiento adicional. Aceptar HTML
Los métodos y propiedades de texto incluyen insertAdjacentHTML (inglés) y pasteHTML (inglés).
text), así como los atributos internalHTML (inglés) y externalHTML (inglés).
Consejo 1: realice cambios en el contenido HTML en una función de secuencia de comandos. Si su diseño utiliza
Si tiene varios controladores de eventos (por ejemplo, en respuesta a los movimientos del mouse), las actualizaciones deben centralizarse
cambiar.
Otro hecho importante sobre el análisis y visualización de componentes HTML es que una vez que el script devuelve el control (p. ej.
Cuando se cierra el controlador de eventos del script o cuando se llama a métodos como setTimeout (inglés),
Este componente recalculará el diseño y mostrará la página web. Ahora ya sabes sobre Internet Explorer
Cómo manejar los cambios, a continuación comenzará a mejorar el rendimiento de sus páginas web.
Consejo 2: cree una cadena HTML y realice un cambio en el documento en lugar de varios
tiempos actualizados. Si el contenido HTML no es necesario, considere usar
Propiedad InnerText (inglés).
En el siguiente ejemplo, el método más lento llama a HTML cada vez que se establece la propiedad InnerHTML.
Analizador. Para mejorar el rendimiento, primero puede crear una cadena y luego asignarla a InnerHTML.
propiedad.
lento:
divUpdate.innerHTML = "";
para (var i=0; i<100; i++)
{
divUpdate.innerHTML += "¡Este es un método más lento!";
}
rápido:
var cadena="";
para (var i=0; i<100; i++)
{
str += "¡Debido a que usa cadenas, este método es más rápido!";
}
divUpdate.innerHTML = cadena;
Usar texto interno
El modelo de objetos DHTML accede al texto de un elemento HTML a través del atributo internalText (inglés).
contenido, mientras que el DOM del W3C proporciona un nodo de texto secundario independiente. Directamente a través del atributo insideText
Actualiza el contenido del elemento de forma permanente, más rápido que llamar al método DOM createTextNode (inglés).
Consejo 3: utilice la propiedad InnerText para actualizar el contenido del texto.
El siguiente ejemplo muestra cómo utilizar la propiedad InnerText para mejorar el rendimiento.
lento:
nodo var;
para (var i=0; i<100; i++)
{
nodo = document.createElement( "SPAN" );
nodo.appendChild( document.createTextNode( "Usar createText
Nodo() ") );
divUpdate.appendChild(nodo);
}
rápido:
nodo var;
para (var i=0; i<100; i++)
{
nodo = document.createElement( "SPAN" );
node.innerText = "Usar la propiedad InnerText";
divUpdate.appendChild(nodo);
}
Agrega un solo elemento usando el DOM
Como se mencionó anteriormente, aplicar el método de acceso al texto HTML hará que se llame al analizador HTML, desde
Reducirá el rendimiento. Entonces usando createElement (inglés) e insertAdjacent
El método Element (inglés) agrega elementos más rápido que llamar una vez al método insertAdjacentHTML.
Consejo 4: llame a los métodos createElement e insertAdjacentElement más rápido que llamar
El método insertAdjacentHTML es rápido.
Realizar actualizaciones DHTML por lotes y llamar al método insertAdjacentHTML una vez puede mejorar
Rendimiento, pero a veces es más eficiente crear elementos directamente desde el DOM. En el siguiente escenario, puedes
para probar ambos métodos y determinar cuál es más rápido.
lento:
para (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Usar insertar
AdjacenteHTML() " );
}
rápido:
nodo var;
para (var i=0; i<100; i++)
{
nodo = document.createElement( "SPAN" );
node.innerText = "Usar insertAdjacentElement() ";
divUpdate.insertAdjacentElement ("antes del fin", nodo);
}
Ampliar opciones en un elemento SELECT
Para la regla anterior que utiliza el método de texto HTML, una gran cantidad de OPCIONES (inglés)
Una excepción es el caso donde se agregan elementos a SELECT (inglés). En este momento, use internalHTML
Las propiedades son más eficientes que llamar al método createElement para acceder a una colección de opciones.
Consejo 5: utilice InnerHTML para agregar una gran cantidad de opciones al elemento SELECT.
Utilice operaciones de concatenación de cadenas para crear el texto HTML del elemento SELECT y luego utilice esto
Consejos para configurar el atributo InnerHTML. Para un número particularmente grande de opciones, la operación de concatenación de cadenas también
afectar el rendimiento. En este caso, cree una matriz y llame a Microsoft JScript join
(Inglés) Método para realizar la concatenación final del texto HTML del elemento OPTION.
lento:
opción var;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
para (var i=0; i<1000; i++)
{
optar = document.createElement ("OPCIÓN");
selUpdate.options.add(opt);
opt.innerText = "Artículo" + i + "Artículo";
}
rápido:
var str="〈SELECT ID='selUpdate'〉";
para (var i=0; i<1000; i++)
{
str += "〈OPCIÓN〉ésimo" + i + " elemento〈/OPCIÓN〉";
}
cadena += "";
divUpdate.innerHTML = cadena;
Más rápido:
var arr = nueva matriz (1000);
para (var i=0; i<1000; i++)
{
arr[i] = "〈OPCIÓN〉ésimo" + i + " elemento〈/OPCIÓN〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";
Actualizar tabla con DOM
Usar el método DOM para insertar filas y celdas de una tabla es mejor que usar insertRow (inglés) e insertar
El método Cell (inglés) (parte del modelo de objetos de tabla DHTML) es más eficiente. especialmente en
Al crear tablas grandes, la diferencia en eficiencia es aún más obvia.
Consejo 6: utilice métodos DOM para crear tablas grandes.
lento:
fila var;
celda var;
para (var i=0; i<100; i++)
{
fila = tblUpdate.insertRow();
para (var j=0; j<10; j++)
{
celda = fila.insertCell();
cell.innerText = "Fila " + i + " , celda " + j + " ";
}
}
rápido:
fila var;
celda var;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tcuerpo);
para (var i=0; i<100; i++)
{
fila = documento.createElement( "TR" );
tbody.appendChild( fila );
para (var j=0; j<10; j++)
{
celda = documento.createElement( "TD" );
fila.appendChild(celda);
cell.innerText = "Fila " + i + " , celda " + j + " ";
}
}
Escribe una vez, usa muchas
Si su sitio web utiliza scripts para realizar operaciones comunes, considere agregar estas funciones
Se puede colocar en un archivo separado para que varias páginas web puedan reutilizarlo. Al hacerlo, no sólo
Puede mejorar la capacidad de mantenimiento del código y mantener el archivo de script en la memoria caché del navegador, por lo tanto
Sólo es necesario descargarlo localmente una vez cuando el usuario visita el sitio. Coloque las reglas de estilo de uso común por separado.
Los mismos beneficios se pueden obtener en los archivos.
Consejo 7: reutilice los scripts colocando el código utilizado con frecuencia en acciones o archivos independientes
Para aprovechar mejor la reutilización de secuencias de comandos, coloque las operaciones de secuencias de comandos utilizadas con frecuencia en complementos DHTML.
comportamiento de código o elemento (inglés). Los comportamientos proporcionan una manera eficiente de reutilizar scripts y
Cree componentes a los que se acceda desde HTML y le permitan usar sus propios objetos, métodos, propiedades y eventos para
Modelo de objetos DHTML extendido. Para el comportamiento que no utiliza la función viewlink (inglés), puede
Considere la posibilidad de utilizar la función de comportamiento ligero en Internet Explorer 5.5
Encapsulación de código más eficiente. Además, si tu código de script está en un SCRIPT (inglés)
En bloques se conseguirá un mayor rendimiento.
No uses demasiado los atributos dinámicos
Las propiedades dinámicas (inglés) proporcionan a los autores web una forma de utilizar expresiones como valores de propiedad.
La expresión se evalúa en tiempo de ejecución y su valor resultante se aplica al atributo. Esta es una característica poderosa. este
La función se puede utilizar para reducir la cantidad de secuencias de comandos en la página, pero dado que las expresiones deben reevaluarse periódicamente y
Esta expresión suele estar relacionada con otros valores de propiedad, por lo que puede tener un impacto negativo en el rendimiento. este tipo de
Esto es especialmente cierto para las propiedades de posicionamiento.
Consejo 8: limite el uso de propiedades dinámicas.
El enlace de datos funciona muy bien
El enlace de datos (inglés) es una característica poderosa que le permite combinar los resultados de una consulta de base de datos.
Contenido Fruit o XML data island (en inglés), vinculado al elemento HTML de la página Web. no tienes
Necesita regresar al servidor para extraer datos, puede proporcionar funciones de clasificación y filtrado de datos, así como diferentes datos.
vista de datos. Imagine una página web que muestra los datos de una empresa como un gráfico de líneas, un gráfico de barras o un gráfico circular.
gráfico, también tiene botones para ordenar los datos por oficina, producto o etapa de ventas, y todo
La función sólo necesita acceder al servidor una vez para implementarla.
Consejo 9: utilice el enlace de datos para proporcionar una vista completa de sus datos al cliente.
No establezca el atributo expando en el objeto del documento
El atributo expando (inglés) se puede agregar a cualquier objeto. Esta propiedad es muy útil, puede
para almacenar información dentro de la página del miércoles actual y proporcionar otra forma de ampliar el modelo de objetos DHTML
Ley. Por ejemplo, puede asignar un atributo en el que se hizo clic a un elemento DHTML y utilizar este atributo para solicitar al usuario
En qué elemento ha hecho clic el usuario. Al generar un evento, también puede usar el atributo expando para
Los controladores de eventos proporcionan más información contextual. No importa cómo uses el atributo expando, corta
Recuerde no configurarlos en el objeto del documento (inglés). Si haces esto, cuando visites
Al solicitar esta propiedad, el documento debe realizar operaciones de recálculo adicionales.
Consejo 10: establezca el atributo expando en el objeto de ventana (inglés).
lento:
para (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Artículo" + i + "Artículo";
tmp = ventana.document.miPropiedad;
}
rápido:
para (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Artículo" + i + "Artículo";
tmp = ventana.miPropiedad;
}
Evite cambiar las reglas de clase y estilo
Cambiar las reglas de clase y estilo es una operación muy costosa que requiere volver a calcular y ajustar todo el
El diseño de un documento. Si su sitio web utiliza hojas de estilo para proporcionar vistas alternativas de contenido, puede
Considerar modificar directamente el objeto de estilo (inglés) del elemento a cambiar, en lugar de modificar el elemento
Atributo className (inglés) u objeto styleSheet (inglés) asociado con la clase.
Consejo 11: al cambiar la apariencia del contenido, modifique el objeto de estilo directamente.
Contraer el rango de texto antes de encontrar el padre
Un objeto TextRange (inglés) representa un elemento HTML seleccionado o recuperado por el usuario.
Área de texto, como BODY (inglés). Al llamar al método parentElement (inglés),
Puede identificar el padre de un rango de texto. Para rangos de texto complejos, llame a parentElement
Antes del método, será más eficiente llamar primero al método de colapso (inglés).
Consejo 12: contraiga el rango de texto antes de acceder al método parentElement.
Extraído de http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
