El principio del proceso de representación de la página del navegador

1. Descripción detallada del proceso de visualización de la página del navegador

  1）客户端接收服务器返回的index.html文件字符串格式代码
  2）浏览器自上而下依次解析html 构建dom tree。行内间样式构建dom tree时候生效。
  3）如果解析htm代码过程 遇到css的link元素 那么浏览器单独分配一个线程异步进行加载、解析css并且构建cssom。浏览器主线程继续往下解析html代码。
  4）如果解析html代码过程 遇到导入js的script标签 那么停止解析html。 加载、解析js脚本。如果此时dom tree 没有构建完毕 无法使用js脚本操作dom
  4）如果构建dom tree和构建cssom完毕 那么进行dom tree和cssom合并构建render tree。
     如果cssom没有构建完毕 那么render tree无法构建。因为cssom无法和dom tree未进行attachment。
  5）布局计算render tree每个节点的大小、位置信息 并且生成节点几何体
  6）绘制节点结合体到页面像素点展示

inserte la descripción de la imagen aquí

2. Utilice el principio del proceso de representación de la página del núcleo del navegador para analizar la diferencia en la posición de importación del script js

<!-- /index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 浏览器分配线程异步加载、解析css -->
  <link rel="stylesheet" href="./css/index.css">

  <!-- 如果js脚本放置head标签内部 可以操作head内部元素 因为此时head以及内部元素已经生成dom tree
   但是不能操作body以及内部元素 因为加载js脚本时候，主线程暂停加载html代码，body以及内容还没有生成dom tree 所以无法操作body以及内部dom-->
  <script src="./js/head.js"></script>

</head>
<body>
  <div id="app" style="display: block;">app</div>
  
  <!-- js脚本放置body底部 此时#app已经被生成到dom tree上 可以使用js脚本操作#app -->
  <script src="./js/inddex.js"></script>
  
</body>
</html>

3. Resultados de la verificación

<header>introducido dentro del elementohead.js
inserte la descripción de la imagen aquí

/*  /js/head.js */

// 可以操作head内部元素
const head = document.head 
const title = document.querySelector('title')
console.log(head) // 可以获取
console.log(title) // 可以获取

// 如果此处操作body 那么失败
const body = document.body
console.log(body) // null

inserte la descripción de la imagen aquí

bodyIntroduce js script al final del elemento.index.js
inserte la descripción de la imagen aquí

/* /js/index.js  */

// 此时可以操作#app
const app = document.querySelector('#app')
app.addEventListener('click',function (ev) {
    
    
  console.log('app')
})

// 只能操作行间样式 因为只有行间样式被构建在dom tree中
console.dir(app.style.display) // 'block'

inserte la descripción de la imagen aquí

reflujo

1. El concepto de reflujo: el reflujo también se denomina reordenamiento. La modificación del estilo dom hace que el elemento dom 大小、位置cambie, lo que da como resultado que se regenere y vuelva a activar dom tree结构发生改变uno nuevo en este momento . En segundo lugar, la situación que provoca el reflujo 1) Agregar o eliminar dom 2) Modificar el ancho, alto, margen, etc. de dom. El tamaño de los elementos en línea se expande por el contenido, y la modificación del tamaño de fuente de los elementos en línea también causará reflujo 3) Cambie el tamaño de la ventana de zoom, especialmente en el caso del diseño receptivo 1) Independientemente de si se opera el dom o no, se activará un reflujo cuando la página se represente por primera vez. Por lo tanto, el reflujo es inevitable, y la única forma de reducir el número de reflujos es reducir la cantidad de cálculo del diseño y reducir el consumo de rendimiento del reflujo 2) Predefina y procese uniformemente todos los estilos de clase. 3) Use o forme capas compuestas para reducir la cantidad de cálculos de diseñorender tree布局计算节点的大小和位置几何体回流

className
positoin:abscoluteposition:fixed

redibujar

1. La primera página de renderizado se llama página de dibujo, y la N-ésima página de renderizado subsiguiente se llama redibujado
2. El reflujo definitivamente desencadenará el redibujado
3. La modificación del color del estilo, el color de fondo, etc. desencadena el redibujado