输入URL到浏览器完成页面渲染发生了什么

四、服务器处理请求

web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件（HTML，css，js），再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息url链接访问本地资源，最后将结果通过web服务器返回给浏览器客户端。

五、返回响应结果

返回响应报文，报文中都会有一个HTTP状态码

六、关闭TCP连接

四次挥手url链接访问本地资源，避免服务器与客户端双方的资源占用和损耗

上图可以这么理解：

客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”

服务端：“收到，我看看我这边有木有数据了。”

服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”

客户端：“好嘞。”

七、浏览器解析HTML

渲染引擎使用webkit，采用关键路径渲染的方式

a.构建DOM树

解析html文件，遍历文档节点，生成Dom树。DOM树的生成过程可能会被CSS和JS的加载阻塞

b.生成CSSOM规则树

解析CSS文件生成CSS规则树，每个css文件都被分析成一个stylesheet对象

c.渲染阻塞

当文档加载过程中遇到 js 文件，html 文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中 js 文件加载完毕，还要等待解析执行完毕，才可以恢复 html 文档的渲染线程。因为 JS 有可能会修改 DOM

d.构建渲染树

浏览器会从DOM树的根节点开始遍历，对每个可见节点找到其适配的CSS样式规则应用

渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，譬如。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

e.渲染树布局

从渲染树的根节点开始遍历，计算每个可见节点的在页面上确切的位置和大小，这个阶段输出的是盒子模型

f.渲染树绘制

遍历渲染树，调用渲染器的paint（）方法在屏幕上显示内容，渲染树的绘制工作由浏览器的UI后端框架完成

g.reflow和repaint (回流与重绘)

HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：replaint和reflow。

replaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。