详解重绘与回流
作者：互联网
详解重绘与回流
不知道鸭
0.12021.12.22 12:05:49字数 2,401阅读 3,516
从输入url到看到页面，过程？
1、输入url （ 协议、网络地址、资源路径 ）
2、查看浏览器缓存，看是否有缓存，如果有缓存，继续查看缓存是否过期，如果没有过期，直接返回缓存页面，如果没有缓存或者缓存过期，发送一个请求。
3、浏览器解析url地址，获取协议、主机名、端口号和路径。
4、获取主机ip地址过程
（1）浏览器缓存
（2）主机缓存
（3）hosts文件
（4）路由器缓存
（5）DNS缓存
（6）DNS递归查询
5、浏览器发起和服务器的TCP连接，执行三次握手
6、三次握手连接后，浏览器发送一个http请求
7、服务器收到请求，转到相关的服务程序，期间可能需要连接并操作数据库（主要分get和post请求）
8、服务器看是否需要缓存，服务器处理完请求，发出一个响应
9、服务器并根据请求头包含信息决定是否需要关闭TCP连接（如需关闭，则需要四次挥手过程）
10、浏览器对接收到的响应进行解码
11、浏览器解析收到的响应并根据响应的内容（假如是HTML文件），启动渲染引擎开始解析HTML文档，并把标签转化成内容树中的DOM节点。同时它也开始解析样式数据，外链的css文件以及style标签内的样式。所有这些样式数据以及HTML中的可见性指令都是用来创建另一棵树——render 树
12、处理嵌入的其他资源如css文件、js文件、图片文件、音视频等文件（处理过程类似上述）
那么浏览器如何渲染页面呢？
-
根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
-
构建渲染树（Render Tree）。
-
页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
一、构建DOM树及CSSOM树
1.1 构建DOM树
HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。最常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点。
DOM节点树中节点与HTML文档中内容一一对应，DOM树构建过程：读取html文档，将字节转换成字符，确定tokens（标签），再将tokens转换成节点，以节点构建 DOM 树。如图所示
标签：缓存,浏览器,DOM,渲染,节点,详解,构建,回流,重绘 来源： https://www.cnblogs.com/sexintercourse/p/16538669.html