Proceso de carga y análisis de páginas HTML
1. El usuario ingresa la URL (suponiendo que es una página html y es la primera visita), el navegador envía 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 <head> que hace referencia al archivo CSS externo.
3. El navegador emite otra solicitud para el archivo CSS, y el servidor devuelve el archivo CSS.
4. El navegador continúa cargando el código en la parte <body> del html, y el archivo CSS está disponible, y puede comenzar a representar la página.
5. El navegador encuentra una etiqueta <img> que se refiere a una imagen en el código y envía una solicitud al servidor. En este momento, el navegador no esperará hasta que se descargue la imagen, sino que continuará renderizando el código detrás.
6. El servidor devuelve el archivo de imagen. Debido a que la imagen ocupa un área determinada y afecta la disposición de los siguientes párrafos, el navegador debe regresar y volver a representar esta parte del código.
7. El navegador encontró una etiqueta <script> que contenía una línea de código Javascript y rápidamente la ejecutó.
8. El script Javascript ejecuta esta declaración, que le indica al navegador que oculte un <style> (style.display = "none") en el código. Cup, de repente falta un elemento así, y el navegador tiene que volver a representar esta parte del código.
9. Finalmente esperé la llegada de </ html>, el navegador estalló en llanto ...
10. Espera, aún no ha terminado, el usuario hizo clic en el botón "skin" en la interfaz, Javascript hizo que el navegador cambiara un poco <link> La ruta CSS de la etiqueta.
11. El navegador convocó a todos aquí <div> <span> <ul> <li> Nosotros, "Todos empacamos y empacamos, tenemos que volver ...", el navegador solicitó un nuevo archivo CSS del servidor y volvió a representar la página.
Por lo tanto, en general, css se coloca en la etiqueta principal y la referencia js se coloca al final
El enlace no bloquea la generación del árbol dom, pero bloqueará la pintura (también puede ser el árbol de renderizado). Personalmente, debería ser que el enlace bloquea el árbol css, lo que resulta en un retraso en la pintura
La etiqueta de script definitivamente bloqueará el análisis dom. Si el navegador lo encuentra, lo descargará y ejecutará el contenido dentro, antes de continuar analizando el siguiente dom. Hay dos soluciones. Una es usar createElement para crear dinámicamente el script