1. El orden de las descargas de IE es de arriba a abajo, y el orden de representación también es de arriba a abajo. La descarga y la representación se realizan simultáneamente.
2. Al renderizar a una parte de la página, todas las partes anteriores se han descargado (no se han descargado todos los elementos asociados).
3. Si encuentra un archivo de incrustación de etiqueta de interpretación semántica (script js, estilo CSS), entonces el proceso de descarga de IE habilitará una conexión separada para la descarga.
4. Después de completar la descarga de la hoja de estilo, se analizará con todas las hojas de estilo descargadas anteriormente. Después de completar el análisis, todos los elementos anteriores (incluidos los que se han presentado antes) se volverán a renderizar.
5. Si hay alguna redefinición en JS y CSS, la función de definición posterior anulará la función de definición anterior.
Carga de JS1. No se puede descargar y analizar en paralelo (bloquear la descarga).
2. Cuando se hace referencia a JS, el navegador envía una solicitud JS y esperará la devolución de la solicitud. Debido a que el navegador necesita una estructura estable de árbol DOM, es muy probable que haya
El código cambia directamente la estructura del árbol DOM, como usar document.write o appendchild, o incluso directamente usando ubicación.href para saltos. Para evitar que ocurran las reparaciones de JS, el navegador
Para modificar el árbol DOM, es necesario reconstruir el árbol DOM, por lo que bloqueará otras descargas y representaciones.
Cómo acelerar la carga de la página HTML1. Pérdida de peso de la página:
a. El peso de la página es el factor más importante que afecta la velocidad de carga.
b. Eliminar espacios y comentarios innecesarios.
do. Mueva el script en línea y el CSS a archivos externos.
d. Puede usar HTML Tidy para perder peso para HTML, y también puede usar algunas herramientas de compresión para perder peso para JavaScript.
2. Reduzca el número de archivos:
a. Reducir el número de archivos a los que se hace referencia en la página puede reducir el número de conexiones HTTP.
b. Se pueden fusionar muchos archivos JavaScript y CSS y es mejor fusionarlos. Caibangzi ha fusionado su JavaScript. Funciones y prototipo.js en un archivo base.js.
3. Reducir la consulta del nombre de dominio:
a. La consulta DNS y los nombres de dominio de análisis también consumen el tiempo, por lo que necesitamos reducir la referencia a JavaScript externo, CSS, imágenes y otros recursos. Cuanto menos use diferentes nombres de dominio, mejor.
4. Datos reutilizados de caché:
a. Datos reutilizados de caché.
5. Optimizar el orden de carga de los elementos de la página:
a. Primero cargue el contenido que se muestra originalmente en la página y el JavaScript y el CSS relacionado con él, y luego cargue cosas relacionadas con HTML, como las que no se muestran en las imágenes originales, flash, videos, etc., y luego las cargan.
6. Reduzca el número de JavaScript en línea:
a. El analizador del navegador asumirá que JavaScript en línea cambiará la estructura de la página, por lo que usar JavaScript en línea es costoso.
b. No use document.write (), un método para generar contenido, use métodos W3C DOM modernos para procesar el contenido de la página para navegadores modernos.
7. Use CSS moderno y etiquetas legales:
a. Use CSS moderno para reducir las etiquetas e imágenes. Por ejemplo, el uso de texto CSS+ moderno puede reemplazar completamente algunas imágenes de solo texto.
b. Use etiquetas legales para evitar la corrección de errores y otras operaciones cuando el navegador analiza HTML. También puede usar HTML Tidy para perder peso para HTML.
8. Frague tu contenido:
a. No use tablas anidadas, sino tablas o divs no anidados. Descompone el diseño de la tabla basado en grandes trozos de tablas anidadas en múltiples tablas pequeñas, para que no tenga que esperar hasta que se cargue el contenido de la página completa (o tabla grande) antes de que se muestre.
9. Especifique el tamaño de la imagen y la tabla:
a. Si el navegador puede determinar inmediatamente el tamaño de la imagen o la tabla, puede mostrar inmediatamente la página sin volver a hacer alguna disposición de diseño.
b. Esto no solo acelera la visualización de la página, sino que también evita algunos cambios incorrectos en el diseño después de que se carga la página.
do. La imagen usa altura y ancho.
Proceso de carga y análisis de la página HTML1. El usuario ingresa a la URL (suponiendo que es una página HTML y es la primera vez que accede a ella), el navegador emite una solicitud al servidor y el servidor devuelve el archivo HTML.
2. El navegador comienza a cargar el código HTML y descubre que hay una etiqueta <link> en la etiqueta <cead> que hace referencia al archivo CSS externo.
3. El navegador emite una solicitud para el archivo CSS, y el servidor devuelve el archivo CSS.
4. El navegador continúa cargando la parte <body> del código en el HTML, y se ha obtenido el archivo CSS, por lo que puede comenzar a representar la página.
5. El navegador encontró una etiqueta <img> en el código que hizo referencia a una imagen e hizo una solicitud al servidor. En este momento, el navegador no esperará hasta que se descargue la imagen, pero continuará representando el código posterior.
6. El servidor devuelve el archivo de imagen. Dado que la imagen ocupa un área determinada, afecta la disposición de los párrafos posteriores, por lo que el navegador debe regresar y volver a renderizar esta parte del código.
7. El navegador encontró una etiqueta <script> que contiene una línea de código JavaScript, y ejecutarla rápidamente.
8. El script JavaScript ejecuta esta declaración, que ordena al navegador que oculte a <syle> (style.display = none) en el código. Es una pena, de repente falta ese elemento, y el navegador tiene que volver a renderizar esta parte del código.
9. Finalmente, esperé la llegada de </html>, y el navegador estalló en llanto ...
10. Espera, aún no ha terminado. El usuario hizo clic en el botón Skinning en la interfaz, y JavaScript le pidió al navegador que cambiara la ruta CSS de la etiqueta <link>.
11. El navegador reunió a todos aquí, todos empacaron su equipaje, tenemos que hacerlo nuevamente ... El navegador solicitó un nuevo archivo CSS del servidor y volvió a retener la página.