浏览器的重绘与回流
这是我在之前面试中遇到的一个问题,今天回想起来正好做一个总结
浏览器在将页面展示给我们之前都做了什么(渲染机制)
这其实也是我遇到的一道面试题,与重绘和回流息息相关
- 用户输入网址
- 浏览器通过DNS获取网站的IP地址
- 浏览器尝试与服务器建立连接
- 服务器发送永久重定向
- 浏览器跟踪重定向地址
- 服务器处理请求
- 服务器发送HTML响应
- 浏览器接收响应,开始解析
- 解析
html
文件,处理并创建DOM
树 - 解析
css
样式表, 构建CSSOM
树 - 将
DOM
与CSSOM
进行结合,构建渲染树(Render Tree) - 根据渲染树来布局(layout),计算每一个节点的位置
- 调用GPU进行绘制(Paint),合成图层
- 重绘(repaint)与回流(reflow)
当html解析遇到script
时会暂停构建DOM,执行js脚本,执行完毕后才会继续构建DOM树,因此将js文件放在html文件底部进行加载才会节省加载时间,加快绘制速度
浏览器使用流式布局 (Flow Based L