¿Qué es el renderizado?
renderizar, cadena HTML - renderizar --> información de píxeles
La dirección URL es una cadena, HTML, css, js están todos dentro
La representación se puede imaginar como una función, el código:
function render (html) {
/* 第一行
第二行
*/
return pixels;
}punto de tiempo de renderizado
Desde ingresar la dirección URL y presionar Enter hasta mostrar la página, ¿qué pasó?
La atención se centra en dos partes, red: tomar HTML, renderizado: renderizado
canalización de renderizado
Analizar HTML, analizar HTML
Formar árbol DOM y árbol CSSOM
Además de la hoja de estilo predeterminada del navegador, otros JS pueden operar
Descargue el complemento para ver el código fuente de Chrome en línea
Busque Chromium, copie la URL
De esta manera, puedes ver el código fuente del navegador Chrome en línea.
ver estilos de página
Se utiliza más comúnmente en el marco general.
/* 给页面所有div加边框 */
document.styleSheets[0].addRule('div', 'border: 2px solid #c00000 !important') 
El código CSS no bloquea el análisis html porque están en hilos diferentes
El código JS bloqueará el análisis html. Debe hacer una pausa cuando encuentre JS, porque JS puede modificar el árbol DOM.
Cálculo de estilo - Recalcular estilo
El proceso de cálculo de valores de propiedades CSS, cascada, herencia.
El estilo final convertirá el valor predeterminado en una unidad absoluta.
Por ejemplo, el color "#f40" se convierte en "rgb(255, 0, 22)"
o rem se convierte en px
Consigue el estilo final
getComputedStyle()
La posición, el ancho y el alto son relativos al bloque contenedor. En relación con el primer elemento posicionado, no es necesariamente el elemento padre. Si no hay ningún elemento padre, seguirá buscando hasta que haya un bloque contenedor posicionado.
La hoja de estilo predeterminada del navegador estipula que el encabezado está oculto y no aparecerá en el árbol de diseño porque no tiene información geométrica.
El árbol de diseño no es un objeto DOM, pero puede obtener algunos atributos indirectamente, como
document.body.clientHeight
635
document.body.clientWidth
1275
document.body.offsetHeight
635Capa en capas
Pintura para dibujar 
Chunking = Mosaico de hilos de composición
Rasterización - Ráster
Dibujar- Dibujar
Pregunta de la entrevista: ¿Cómo representa el navegador la página?
¿Qué es el reflujo?
Retransmisión (tipografía)
Cambiar la información geométrica volverá a fluir
¿Qué es repintar?
por qué transformar
