一：DOM

从HTML转变为DOM

浏览器先请求服务器得到HTML文件，得到的是显示字节内容的html文件，将字节转换成字符的文件，就是程序员写的那种代码，因为html是标记语言，小于号<和大于号>分别标识不同的结构，于是浏览器将字符转换为token，再把token转变为节点对象，再把节点对象连接在一起，形成文本对象也就是DOM，DOM也就是浏览器自己的语言

html字节文件 -> 字符(程序员认识的语言) -> token -> 节点 -> DOM

二：CSSOM

浏览器再构建DOM的时候，就会遇到link标签，然后向服务器发送请求，接着得到css文件，后面流程跟处理html非常相似

字节 -> 字符 -> token -> 节点 -> CSSOM【css对象模型】

三：渲染树

DOM + CSSOM = 渲染树渲染树的任务就是匹配DOM和CSSOM的节点

四：布局

布局的意思就是获取渲染树的结构，节点的位置和大小，而布局是依据盒子模型来进行的

五：绘制

浏览器把渲染树以像素的形式绘制再页面

六：渲染HTML+CSS+JS

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
    </head>
    <body></body>
</html>

1.请求页面【请求HTML -> 返回HTML】

请求HTML -> 返回HTML

2.构建DOM 【请求CSS->返回CSS、请求JS 】

请求CSS->返回CSS

请求JS ->返回JS

css js谁先返回看具体情况的，重点再下面

重点：如果先返回并解析完js是会发生阻塞的，不能先执行js文件，必须等到CSSOM构建完成才能执行js文件；因为前面说的渲染树是需要DOM和CSSOM构建完成以后才能构建的；行内js也是会发生阻塞；CSSOM的构建就是渲染中一个重要的阻塞因素；DOM也会阻塞渲染，但是DOM可以部分解析而CSSOM不能部分解析；因为如果部分解析，后面的CSS样式跟前面的不一样，那页面的样式就乱套了

3.构建CSSOM

返回CSS文件 -> 解析CSS文件并且构建CSSOM

4.运行js

在构建DOM和构建CSSOM的时候是可以请求JS的

返回JS -> JS 运行

因为js既可以操作DOM又可以操作CSSOM，如果不等JS下载解析执行完构建DOM，就乱套了

所以不管是行内JS还是外部的JS文件都会让HTML解析停止下来，对网页来说，相当于阻塞一次渲染

如果给js设置 async 异步解析，不会阻塞HTML解析

遇到img标签，图片，不会阻塞HTML解析

5.构建DOM

JS运行之后，形成渲染树，构建DOM，进行布局，最后绘制

七：总结

构建DOM --> 构建CSSOM --> 构建渲染树 --> 布局 --> 绘制 \ / js

构建DOM的时候请求下载js，等CSSOM构建完成，

js可以对DOM、CSSOM进行修改，这样后面的三步又会再运行一次

浏览器渲染过程，回流，重绘，js引入 async，异步下载完立即执行 defer【延迟到dom解析完】

https://www.bilibili.com/video/BV18f4y1H7Zu?from=search&seid=4219846128846378321&spm_id_from=333.337.0.0

reflow（回流）和repaint（重绘），怎么减少重绘样式改变位置不变；backgroundcolor，会走绘制那步往后走

重绘位置变化需要重新渲染 render 布局那一步

回流必将引起重绘，重绘不一定引起回流

如何避免

css 1.dom树末端 2.少内联 3.absolute fiexd 4.no table 5.transform

js 1.少改css，要改就一次性改完 2.避免频繁操作dom，可以创建文档片段createDocumentFragment 3.先disable了 4.避免循环读取offsetleft等属性 5.复杂的动画可以脱离文档流实现

5.浏览器-渲染机制