浏览器的重绘和回流

浏览器的重绘与回流

我的博客

这是我在之前面试中遇到的一个问题，今天回想起来正好做一个总结

浏览器在将页面展示给我们之前都做了什么（渲染机制）

这其实也是我遇到的一道面试题，与重绘和回流息息相关

1. 用户输入网址
2. 浏览器通过DNS获取网站的IP地址
3. 浏览器尝试与服务器建立连接
4. 服务器发送永久重定向
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器发送HTML响应
8. 浏览器接收响应，开始解析
9. 解析html文件，处理并创建DOM树
10. 解析css样式表， 构建CSSOM树
11. 将DOM与CSSOM进行结合，构建渲染树(Render Tree)
12. 根据渲染树来布局(layout)，计算每一个节点的位置
13. 调用GPU进行绘制(Paint)，合成图层
14. 重绘(repaint)与回流(reflow)

当html解析遇到script时会暂停构建DOM，执行js脚本，执行完毕后才会继续构建DOM树，因此将js文件放在html文件底部进行加载才会节省加载时间，加快绘制速度

浏览器使用流式布局 (Flow Based L