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

浏览器渲染大体的几个过程：

• DNS域名解析
• 创建TCP链接
• 发送HTTP请求
• 服务器处理请求
• 返回响应结果
• 关闭TCP链接
• 浏览器解析HTM
• 浏览器布局渲染

1、DNS域名解析 (经过DNS查询域名所对的IP地址)

• 咱们在浏览器输入网址的时候，浏览器从历史记录和书签等地方搜寻本身的DNS缓存，找出已输入的字符串能够对应的url，而后根据智能提示，让你能够经过enter键，补全url地址。
• 查找本地hosts文件，检查该文件是否有相应的域名，ip对应关系，有的话取出
• 若上两步都没有，将域名发送给本地DNS服务器（中国电信，移动），查询本地DNS缓存，查找成功则返回结果。若不成功则经过迭代查询，屡次访问不一样的DNS服务器，取到域名对应的ip地址返回给本地DNS服务器
• 本地DNS将这个域名和IP地址缓存起来，而后把ip地址以响应报文的形式发送给客户端

2、创建TCP链接 （可靠稳定）

TCP 是一种面向有链接的传输层协议。 它能够保证两端（发送端和接收端）通讯主机之间的通讯可达。 它可以处理在传输过程当中丢包、传输顺序乱掉等异常状况；此外它还能有效利用宽带，缓解网络拥堵。

三次握手：创建链接

上图也能够这么理解：

客户端：“你好，在家不，有你快递。”

服务端：“在的，送来就行。”

客户端：“好嘞。”

3、发送http请求

   HTTP请求报文（用什么协议，取什么资源）

4、服务器处理请求

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

5、返回响应结果

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

6、关闭TCP链接

四次挥手，避免服务器与客户端双方的资源占用和损耗

上图能够这么理解：

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

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

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

客户端：“好嘞。”

7、浏览器解析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： 意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或所有发生了变化。