从输入 URL 到渲染出整个页面的过程包括以下部分：

• 1、DNS 解析 URL 的过程

• 2、浏览器发送请求与服务器交互的过程（3 次握手）

• 3、浏览器对接收到的 html 页面渲染的过程

• 4、浏览器和服务器断开连接（4 次握手）

DNS 解析 URL 的过程

DNS 解析的过程就是寻找哪个服务器上有请求的资源。因为 ip 地址不容易记忆，一般会使用 URL 域名（如www.baidu.com）作为网址。DNS 解析就是将域名翻译成 IP 地址的过程。

具体过程：

• 1）浏览器缓存：浏览器会按照一定的频率 缓存 DNS 记录

• 2）操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，就会取操作系统中找

• 3）路由缓存：路由器也有 DNS 缓存

• 4）ISP 的 DNS 服务器：ISP 有专门的 DNS 服务器应对 DNS 查询请求

• 5）根服务器：ISP 的 DNS 服务器找不到之后，就要向根服务器发出请求，进行递归查询

浏览器与服务器交互过程

• 1）首先浏览器利用 tcp 协议通过三次握手与服务器建立连接
  　　 http 请求包括 header 和 body。header 中包括请求的方式（get 和 post）、请求的协议 （http、https、ftp）、请求的地址 ip、缓存 cookie。body 中有请求的内容。

tcp 将 http 长报文划分为短报文，通过三次握手与服务端建立连接，进行可靠传输。
三次握手的步骤（抽象派）
客户端：hello，你是 server 么？
服务端：hello，我是 server，你是 client 么
客户端：yes，我是 client

• 2）浏览器根据解析到的 IP 地址和端口号发起 http 的 get 请求.

• 3）服务器接收到 http 请求之后，开始搜索 html 页面，并使用 http 返回响应报文

• 4）若状态码为 200 显示响应成功，浏览器接收到返回的 html 页面之后，开始进行页面的渲染

浏览器页面渲染过程

• 1）浏览器根据深度遍历的方式把 html 节点遍历成 dom 树

• 2）将 css 解析成 CSS DOM 树

• 3）将 dom 树和 CSS DOM 树构造成 render 树

• 4）JS 根据得到的 render 树 计算所有节点在屏幕中的位置，进行布局（回流）

• 5）遍历 render 树并调用硬件 API 绘制所有节点（重绘）

浏览器与服务器断开连接

断开连接时，需要进行四次挥手（因为是全双工的，所以需要四次挥手）。

四次挥手的步骤（抽象派）

• 主动方：我已经关闭了向你那边的主动通道了，只能被动接收了
• 被动方：收到通道关闭的信息
• 被动方：那我也告诉你，我这边向你的主动通道也关闭了
• 主动方：最后收到数据，之后双方无法通信