Al abrir un sitio web, ¿cuál es el orden de carga? ¿Cargar HTML primero, luego JS y luego CSS? ¿O qué?

1. El usuario ingresa la URL (suponiendo que es una página HTML a la que accede por primera vez), el navegador envía una solicitud al servidor y el servidor devuelve la información. Archivo HTML.

2. El navegador comienza a cargar el código html y lo encuentra.

3. El navegador envía la solicitud del archivo CSS nuevamente y el servidor devuelve el archivo CSS.

4. El navegador continúa cargando html

5. El navegador encuentra uno

6. El servidor devuelve el archivo de imagen, porque la imagen ocupa un cierto espacio. Afecta la disposición de los párrafos siguientes, por lo que el navegador debe volver atrás y volver a representar esta parte del código.

7. El navegador encontró uno

8. El script JavaScript ejecutó esta declaración, que ordenó al navegador ocultar uno

9. > p>

10. Espera, aún no ha terminado. El usuario hace clic en el botón "Cambio de apariencia" en la interfaz y Javascript requiere que el navegador cambie la ruta CSS de la etiqueta << link> >.

11. El navegador llamó a todos los presentes

Relacionado:

Primero, el orden en que el navegador carga y representa HTML

Descargar orden 1. IE es de arriba hacia abajo y el orden de representación también es de arriba hacia abajo. La descarga y el renderizado se producen simultáneamente.

2. Al renderizar en una determinada parte de la página, las partes superiores se han descargado (no significa que se hayan descargado todos los elementos asociados).

3. Si encuentra un archivo incrustado con una etiqueta interpretada semánticamente (script JS, estilo CSS), el proceso de descarga de IE habilitará una conexión separada para la descarga.

4. Una vez descargada una hoja de estilo, se analizará junto con todas las hojas de estilo descargadas anteriormente. Después del análisis, se volverán a renderizar todos los elementos anteriores (incluidos los elementos que se han renderizado antes).

5. Si hay alguna redefinición en JS y CSS, las funciones definidas más adelante sobrescribirán las funciones predefinidas.

En segundo lugar, carga de JS

1. No se puede descargar y analizar en paralelo (evitar la descarga).

2. Al hacer 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 de árbol DOM estable, es probable que haya código en JS que cambie directamente la estructura del árbol DOM, como usar document.write o appendChild, o incluso usar directamente location.href para saltar, para evitar JS modifique el árbol DOM, el navegador necesita reconstruir el árbol DOM, por lo que se bloquearán otras descargas y visualizaciones.

3. Cómo acelerar la velocidad de carga de las páginas HTML

1. Pérdida de peso:

A. Factor que afecta la velocidad de carga.

B. Eliminar espacios y comentarios innecesarios.

C. Mover scripts en línea y CSS a archivos externos.

D. Puedes usar HTML Tidy para perder peso en HTML, y también puedes usar algunas herramientas de compresión para perder peso en JavaScript.

2. Reducir 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. Muchos archivos JavaScript y CSS se pueden fusionar, y es mejor fusionarlos.

3. Reducir las consultas de nombres de dominio:

A. Las consultas de DNS y la resolución de nombres de dominio también consumen mucho tiempo, por lo que es necesario reducir las referencias a recursos externos como JavaScript, CSS. e imágenes, y utilice diferentes Cuantos menos nombres de dominio, mejor.

4. Caché de datos reutilizados:

A.

5. Optimice el orden de carga de los elementos de la página:

A. Primero cargue el contenido que se muestra inicialmente en la página y el JavaScript y CSS relacionados, y luego cargue elementos relacionados con HTML, como ya que las imágenes y flash, vídeos, etc. no son recursos gordos. Mostrados inicialmente, se cargan al final.

6. Reducir la cantidad de JavaScript en línea:

A. El analizador del navegador asumirá que el JavaScript en línea cambiará la estructura de la página, por lo que usar JavaScript en línea es muy costoso.

B. No utilice document.write() como método para generar contenido, pero utilice métodos DOM modernos del W3C para procesar el contenido de la página para los navegadores modernos.

7. Utilice CSS moderno y etiquetas legales:

A. Utilice CSS moderno para reducir etiquetas e imágenes. Por ejemplo, con texto CSS moderno, puedes reemplazar completamente algunas imágenes con texto sin formato.

B. El uso de etiquetas legales puede evitar operaciones de "corrección de errores" cuando el navegador analiza HTML, y HTML Tidy también puede usarlo para perder peso en HTML.

8. Divide tu contenido:

A. No uses tablas anidadas, usa tablas no anidadas o divs. Los diseños basados ​​en tablas anidadas grandes se dividen en varias tablas más pequeñas para que no tenga que esperar hasta que se cargue toda la página (o la tabla grande).

9. Especifique el tamaño de las imágenes y tablas:

A. Si el navegador puede determinar inmediatamente el tamaño de la imagen o tabla, entonces puede mostrar la página inmediatamente sin tener que hacerlo. Haz algo de diseño nuevamente. Trabaja.

B. Esto no solo acelera la visualización de la página, sino que también evita algunos cambios inapropiados en el diseño una vez cargada la página.

C. Las imágenes utilizan alto y ancho.