输入URL到浏览器完成页面渲染发生了什么
浏览器渲染大致的几个过程：
- DNS域名解析
- 建立TCP连接
- 发送HTTP请求
- 服务器处理请求
- 返回响应结果
- 关闭TCP连接
- 浏览器解析HTM
- 浏览器布局渲染
一、DNS域名解析 (通过DNS查询域名所对的IP地址)
- 我们在浏览器输入网址的时候，浏览器从历史记录和书签等地方搜寻自己的DNS缓存，找出已输入的字符串可以对应的url，然后根据智能提示，让你可以通过enter键，补全url地址。
- 查找本地hosts文件，检查该文件是否有相应的域名，ip对应关系，有的话取出
- 若上两步都没有，将域名发送给本地DNS服务器（中国电信，移动），查询本地DNS缓存，查找成功则返回结果。若不成功则通过迭代查询，多次访问不同的DNS服务器，取到域名对应的ip地址返回给本地DNS服务器
- 本地DNS将这个域名和IP地址缓存起来，然后把ip地址以响应报文的形式发送给客户端
二、建立TCP连接 （可靠稳定）
TCP 是一种面向有连接的传输层协议。 它可以保证两端（发送端和接收端）通信主机之间的通信可达。 它能够处理在传输过程中丢包、传输顺序乱掉等异常情况；此外它还能有效利用宽带，缓解网络拥堵。
三次握手：建立连接
上图也可以这么理解：
客户端：“你好，在家不，有你快递。”
服务端：“在的，送来就行。”
客户端：“好嘞。” ![]()
三、发送http请求
HTTP请求报文（用什么协议，取什么资源）
四、服务器处理请求
web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件（HTML，css，js），再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。
五、返回响应结果
返回响应报文，报文中都会有一个HTTP状态码
六、关闭TCP连接
四次挥手，避免服务器与客户端双方的资源占用和损耗
上图可以这么理解：
客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”
服务端：“收到，我看看我这边有木有数据了。”
服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”
客户端：“好嘞。”
七、浏览器解析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： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。
