Mecanismo básico de representación, carga de la página
1. Mecanismo de reproducción
1) ¿Qué es DOCTYPE, función, tipo?
DOCTYPE se utiliza para declarar el tipo de documento y la especificación DTD. Uno de los propósitos principales es verificar la legalidad del archivo. Si el código del archivo no es legal, entonces el navegador cometerá algunos errores al analizar.
(Dígale al navegador qué tipo de archivo usar ahora)
- Tipo de DOCTYPE:
HTML 5
HTML 4.01 Strict （该DTD包含所有HTML元素和属性，但不包括展示性和弃用性的元素font...）
HTML 4.01 Transitional （该DTD包含所有HTML元素和属性，包括展示性和弃用性的元素font...）
2) Proceso de renderizado del navegador
3) Reorganizar el reflujo
Cada elemento tiene su propio cuadro, y el navegador calculará de acuerdo con varios estilos y lo colocará donde debería aparecer según el resultado.
触发：（说出2条即可） ① 增、删、改DOM节点时，会导致 Reflow 或 Repaint； ② 移动DOM的位置，或者搞个动画的时候； ③ 修改CSS样式时； ④ Resize窗口时（移动端没这个问题），或是滚动时； ⑤ 修改网页的默认字体时；
4) repintar
Cada cuadro tiene su propio tamaño, ubicación y otros atributos, como el color y el tamaño de la fuente. Después de confirmar, el navegador dibujará las características de cada elemento una vez y aparecerá en la página.
触发： DOM改动； CSS改动；
5) Diseño de diseño
El diseño indica principalmente la posición de cada elemento del árbol de renderizado, y se calcula el contenido de cada elemento del árbol de renderizado.
Dos, carga de página
1 puntos de conocimiento
1.1 La forma de cargar recursos
①Introduzca la URL (o la página de salto) para cargar html
http://coding.m.imooc.com
②Cargar recursos estáticos en html
<script src="/static/js/jquery.js"></script>
1.2 El proceso de cargar un recurso
① El navegador entrega la resolución del nombre de dominio dns de acuerdo con la URL solicitada, encuentra la IP real e inicia una solicitud http al servidor;
② El servidor devuelve los datos después de que se completa el procesamiento en segundo plano y el navegador recibe los archivos (HTML , CSS, JS, imágenes, etc.)
③ Examinar El intérprete analiza los recursos cargados y establece la estructura de datos interna correspondiente (como HTML DOM)
④ Cargue el archivo de recursos analizado, renderice la página y complete
1.3 El proceso de renderización de la página del navegador
Genere DOM Tree de
acuerdo con la estructura HTML Genere CSSOM de acuerdo con CSS
Integre DOM y CSSOM para formar
RenderTree Comience a renderizar y mostrar de acuerdo con RenderTree
Encounter
2 preguntas y respuestas
Tema:
* Proceso detallado desde la introducción de la URL hasta la obtención de html
* La diferencia entre window.onload y DOMContentLoaded
2.1 El proceso detallado desde la introducción de la URL hasta la obtención de html
(Mismo punto de conocimiento 1.2)
2.2 La diferencia entre window.onload y DOMContentLoaded
window.onload-todos los recursos de la página se ejecutarán después de la carga, incluidas imágenes, videos, etc.
DOMContentLoaded-DOM se puede ejecutar después de la renderización, en este momento las imágenes y los videos aún no se han cargado
