浏览器渲染流程

浏览器请求至展示页面的流程

1. DNS查询
2. TCP连接
3. HTTP请求
4. 服务器响应
5. 客户端渲染

客户端渲染流程

1. 解析html => 构建DOM树
2. 解析css + DOM树 => 构建render树
3. 布局render树 (重排layout / reflow) = 计算元素大小、位置
4. 绘制render树 (重绘paint） = 绘制页面像素
5. 发送页面信息给GPU绘制
6. GPU合成各层页面 => 显示
   
   注意

• Render Tree 绘制时，不会加入display: none的节点；而会加入visibility: hidden的节点
• display: none => display: block会触发重排reflow，因为节点树发生了改变。而visibility: hidden => visibility: visible不会触发重排reflow，因为元素的布局不改变。
• **浏览器的异步reflow：**浏览器将一批reflow操作同时处理。