The principle of browser rendering page process

1. Detailed description of the browser rendering page process

  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）绘制节点结合体到页面像素点展示

insert image description here

2. Use the principle of browser kernel rendering page process to analyze the difference in js script import position

<!-- /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. Verification results

<header>introduced inside the elementhead.js
insert image description here

/*  /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

insert image description here

bodyIntroduce js script at the end of the elementindex.js
insert image description here

/* /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'

insert image description here

reflow

1. The concept of reflux: reflux is also called rearrangement. Modifying the dom style causes the dom element 大小、位置to change, resulting in dom tree结构发生改变a new one being regenerated render treeand re- 布局计算节点的大小和位置几何体triggered at this time 回流.
Second, the situation that causes reflow
1) Add or delete dom
2) Modify the width, height, margin, etc. of dom. The size of inline elements is expanded by the content, and modifying the font-size of inline elements will also cause reflow
3) Resize the zoom window, especially in the case of responsive layout
.
Performance consumption
1) Regardless of whether the dom is operated or not, a reflow will be triggered when the page is first rendered. Therefore, reflow is inevitable, and the only way to reduce the number of reflows is to reduce the calculation amount of layout and reduce the performance consumption of reflow.
2) Pre-define classNameand uniformly process all class styles.
3) Use positoin:abscoluteor position:fixedform composite layers to reduce the amount of layout calculations

redraw

1. The first rendering page is called drawing page, and the subsequent Nth rendering page is called redrawing
2. Reflow will definitely trigger redrawing
3. Modifying style color, background color, etc. triggers redrawing