浏览器输入一个URL到页面显示的过程
- 首先通过DNS服务器进行域名解析
- 解析出对应的IP地址，然后从ip地址对应的主机发送http请求，获取对应的静态资源
- 默认情况服务器会放回index.html文件
- 然后浏览器内核开始解析HTML
- 首先 会解析对应的html 生成DOM Tree
- 解析过程中，如果遇到css的link标签 则会下载对应的css文件
- 下载完对应的css文件后会进行css解析 生成cssom（css object model）
- 当DOM Tree 和 CSSTree 都解析完成之后，会进行合并来生成Render Tree（渲染树）
- 初步生成的渲染树会显示节点以及部分样式 但是并不表示每个节点的尺寸 位置信息 于是进行Layout（布局）来生成渲染树中节点的宽度 高度位置信息
- 经过Layout之后 浏览器内核将布局时的每个frame转屏幕上的每个像素点 将每个节点绘制到屏幕上
注意：第一次确定节点的大小位置 称之为布局（Layout）之后对节点大小位置改变后重新计算称之为回流
-引起回流的情况：
- DOM结构发生改变（节点的增删）
- 修改了节点的布局（高度 宽度 字体大小等）
- 修改窗口的尺寸
- 调用getComputedStyle获取位置信息
第一次绘制节点 渲染到页面上称之为绘制（paint）之后重新绘制 称之为重绘
引起重绘情况:
- 修改背景色颜色 等
回流一定会引起重绘 所以回流非常消耗性能
- 如何避免回流
- 尽量一次性的修改样式
- 避免频繁的操作DOM
- 避免通过getComputedStyle 获取尺寸位置信息等
- 对于某些元素使用position:absolute/fixe
