一、浏览器渲染页面过程详细说明
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）绘制节点结合体到页面像素点展示
二、运用浏览器内核渲染页面过程原理解析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>
三、验证结果
<header>元素内部引入的head.js
/* /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
body元素末尾引入js脚本index.js
/* /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'
回流
一、回流概念：回流也称为重排。修改dom样式引发dom元素大小、位置发生改变，导致dom tree结构发生改变，重新生成新的render tree，并且重新布局计算节点的大小和位置几何体，此时就会触发回流。
二、引发回流的情况
1）增删dom
2）修改dom的width、height、margin等。行内元素大小由内容撑开，修改行内元素的font-size也会导致回流
3）缩放窗口resize，特别响应式布局情况缩放窗口导致回流
4）使用getComputedStyle计算获取元素样式大小、位置
三、减少回流对性能的消耗
1）无论是否操作dom，页面初次渲染时候就会触发一次回流。所以回流是不可避免的，只能减少回流次数，也就是减少布局的计算量而减少回流对性能的消耗
2）预先定义className统一处理所有class样式。
3）使用positoin:abscolute或者position:fixed形成合成图层，减少布局计算量
重绘
一、初次渲染页面叫做绘制页面，往后第N次渲染页面就叫做重绘
二、回流一定会触发重绘
三、修改样式颜色、背景色等触发重绘