La optimización HTML acelera las páginas web

La clave para reducir el tiempo de descarga de las páginas web es intentar reducir el tamaño del archivo. Cuando varias páginas comparten cierto contenido de ingredientes, puede considerar separar estas partes comunes por separado. Por ejemplo: podemos escribir scripts utilizados por múltiples páginas HTML en archivos .js independientes, y luego llamarlo a la página de la siguiente manera:

<scriptsrc = myfile.js> </script>

De esta manera, el archivo público solo debe descargarse una vez y luego ingresa al búfer. La próxima vez que llame a la página HTML que contiene el archivo público nuevamente, el tiempo de descarga se reducirá significativamente.

CSS es un disfraz HTML, y una hermosa página web no puede estar sin ella. Hay muchas formas de referirse a CSS en las páginas HTML, y la eficiencia de diferentes métodos es diferente. Por lo general, podemos extraer el código de control de estilo definido entre <Syle> </ystye>, guárdelo en un archivo .css separado y luego hacer referencia a la página HTML en la etiqueta <link> o la etiqueta @import:

<estilo>

@importurl (mySheet1.css);

</style>

Tenga en cuenta 2 puntos: 1. No se requiere que la etiqueta <estilo> se incluya en el archivo .css; 2. @Import y las etiquetas de enlace deben definirse en la parte principal de la página HTML.

Minimizar el espacio de memoria ocupado por las páginas HTML es una forma efectiva de acelerar las descargas de la página. En este sentido, hay dos problemas a los que prestar atención:

Las páginas HTML no se pueden separar del soporte de los programas de script. A menudo incorporamos múltiples lenguajes de secuencias de comandos en las páginas, como JavaScript y VBScript. Sin embargo, no sé si nota: tal mezcla ralentiza la velocidad de acceso de la página. La razón es que para interpretar y ejecutar múltiples códigos de script, se deben cargar múltiples motores de script en la memoria. Por lo tanto, intente escribir código en el mismo idioma de secuencias de comandos en la página.

¿Has usado la etiqueta <iframe>? Es una característica muy maravillosa. Si desea incluir el contenido de la segunda página en un documento HTML, la forma habitual es usar la etiqueta <frameset>. Pero con <frame>, todo se vuelve simple. Por ejemplo, para desarrollar una página de vista previa de documentos, puede colocar una serie de temas a la izquierda y un iframe a la derecha, que contiene el documento que se previsará; Cuando el mouse pasa por cada enlace de tema a la izquierda, cree un nuevo iframe a la derecha para obtener una vista previa del documento. Al hacerlo, la eficiencia del código es indudablemente eficiente, pero al mismo tiempo conduce a un procesamiento pesado y, en última instancia, la velocidad lenta.

Use solo un solo iframe. Cuando el mouse apunta a un nuevo tema, solo necesita modificar el atributo SRC del elemento iframe. De esta manera, solo un documento de vista previa permanecerá en la memoria en cualquier momento.

Cuando navegue la página en línea todos los días, definitivamente verá muchos efectos de animación. Por ejemplo, un pequeño conejo lindo está caminando de un lado a otro en la página ... La tecnología central para lograr este efecto es el posicionamiento de CCS. Por lo general, usamos element.style.left y element.style.top para lograr el propósito del posicionamiento gráfico. Sin embargo, hacer esto crea algunos problemas: la propiedad izquierda devuelve una cadena y contiene la unidad de medición (como 100px). Por lo tanto, para establecer una nueva coordenada de posición, primero debe procesar el valor de retorno de la cadena antes de poder asignar el valor, de la siguiente manera:

dimstringleft, intleft

stringleft = element.style.left

intleft = parseInt (stringleft)

intleft = intleft 10

element.style.left = intleft;

Definitivamente sentirás que tienes que escribir un código tan complejo para hacer una pequeña cosa. ¿Hay una manera más concisa? Mire estas 4 propiedades: Posleft, Postop, Poswidth y Posheight, que corresponden al número de puntos del valor de retorno de cadena correspondiente. OK, use estas propiedades para reescribir el código para implementar las funciones implementadas por el código anterior:

element.style.posleft = 10

El código es más corto, ¡pero más rápido!

Cuando se trata de efectos de animación, por supuesto, el uso de temporizadores es inseparable. El método habitual es usar ventana. Sin embargo, si hay varias animaciones en la página que se mostrarán, ¿necesita establecer múltiples temporizadores? ¡La respuesta es no! La razón es simple: la función del temporizador consumirá muchos recursos valiosos del sistema. Pero aún podemos controlar múltiples animaciones en la página, y el truco es usar un bucle. En el bucle, controle la posición de la animación correspondiente de acuerdo con diferentes valores variables, solo se usa una llamada de función Window.setTimeout () en todo el bucle.

Deje que la imagen aparezca y aparezca ocasionalmente cree efectos interesantes. Hay dos formas de lograr esto: use el atributo de visibilidad o el atributo de visualización de CSS. Para los elementos de posición absolutos, el impacimento y la visibilidad tienen el mismo efecto. La diferencia entre los dos es que el elemento establecido para mostrar: ninguno ya no ocupará el espacio de la secuencia de documentos, mientras que el elemento establecido en Visibilidad: Hidden seguirá en su posición original.

Pero si desea lidiar con elementos en posición absoluta, el uso de la visibilidad será más rápido.

Un consejo importante para escribir una página web DHTML es: Comenzar pequeño. Al escribir una página DHTML por primera vez, asegúrese de no intentar usar todas las funciones DHTML que conozca en la página. Solo se puede usar una sola característica nueva a la vez y los cambios resultantes se pueden observar cuidadosamente. Si encuentra que el rendimiento ha disminuido, puede encontrar rápidamente por qué.

Defer es un héroe desconocido entre las poderosas funciones de los programas de secuencias de comandos. Es posible que nunca lo haya usado, pero después de leer la introducción aquí, creo que no puede vivir sin ella. Le dice al navegador que el segmento de script contiene un código que no necesita ejecutarse de inmediato, y, junto con el atributo SRC, también puede permitir que estos scripts se descarguen en segundo plano, y el contenido del primer plano se muestra al usuario normalmente.

1. No llame al comando Document.Write en el bloque de script de tipo de diferencias, porque document.write producirá un efecto de salida directo.

2. Además, no incluya ninguna variable global o funciones para usar para ejecutar el script inmediatamente en el bloque de script de diferir.

Todos sabemos que los servidores UNIX son sensibles a los casos, pero ¿sabía que los búferes de Internet Explorer también tratan las cadenas de casos de manera diferente? Por lo tanto, como desarrollador web, debe recordar mantener la consistencia del caso de las cadenas de URL del mismo enlace en diferentes ubicaciones. De lo contrario, las copias de seguridad de diferentes archivos en la misma ubicación se almacenarán en el búfer del navegador, que también aumentará la cantidad de solicitudes para descargar contenido en la misma ubicación. Todos estos indudablemente reducen la eficiencia de acceso web. Así que recuerde: URL en la misma ubicación, mantenga la consistencia del caso de las cadenas de URL en diferentes páginas.

Al escribir o ver el código HTML de otras personas por nosotros mismos, debemos haber encontrado situaciones en las que las marcas no tienen fin. Por ejemplo:

<p> Ejemplo con cabeza y sin marcas de cola

<ul>

<li> el primero

<li> el segundo

<li> el tercero

</ul>

Obviamente, faltan tres etiquetas finales </li> en el código anterior. Pero esto no evita que se ejecute correctamente. En HTML, hay algunas etiquetas de este tipo, como Frame, IMG y P.

Pero por favor no seas vago. Por favor escriba la marca final intacta. Esto no solo hace que el formato de código HTML sea estándar, sino que también acelera la velocidad de visualización de la página. Porque Internet Explorer no pasará tiempo juzgando y calculando dónde finaliza el párrafo o el elemento de la lista.

<p> Ejemplo con marcas de cabeza y cola </p>

<ul>

<li> Primero </li>

<li> segundo </li>

<li> Tercer </li>

</ul>

Ok, lo anterior enumera 10 técnicas de procesamiento para acelerar las páginas HTML. Es simple describirlos, pero solo comprendiendo y dominando la esencia y aprendiendo de un ejemplo u otro, ¿puede escribir programas más rápidos y mejores?