网上很多版本，虽然大体没什么不同，但是我觉得还是不够详尽，很多地方只是提了，没有仔细说明，于是自己尝试开一个，按照自己所学到的整理一遍。

你输入的这串英文我要转成数字

当输入URL按下回车后，浏览器会根据域名查找其所对应的IP地址。

问：那么什么是IP呢？这个IP最终指向哪里呢？

  1. IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码，通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机，想要访问某个服务器，必须先知道它的 IP 地址；
  2. 根据第一点即可知道，这个IP指向的就是存放这个页面资源的电脑，我们称为服务器。

问：那么浏览器到底是怎么查找的呢？这个IP与域名的关系又是怎样的呢？

一、查找过程

  1. 浏览器搜索自己的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
  2. 搜索操作系统中的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
  3. 搜索操作系统的 hosts 文件（ Windows 环境下，维护一张域名与 IP 地址的对应表）；
  4. 操作系统将域名发送至 LDNS（本地区域名服务器，如果你在学校接入互联网，则 LDNS 服务器就在学校，如果通过电信接入互联网，则 LDNS 服务器就在你当地的电信那里。）LDNS 查询 自己的 DNS 缓存（一般查找成功率在 80% 左右），查找成功则返回结果，失败则发起一个迭代 DNS 解析请求；
    1. LDNS 向 Root Name Server （根域名服务器，其虽然没有每个域名的的具体信息，但存储了负责每个域，如 com、net、org等的解析的顶级域名服务器的地址）发起请求，此处，Root Name Server 返回 com 域的顶级域名服务器的地址；
    2. LDNS 向 com 域的顶级域名服务器发起请求，返回 baidu.com 域名服务器地址；
    3. LDNS 向 baidu.com 域名服务器发起请求，得到 www.baidu.com 的 IP 地址；
  5. LDNS 将得到的 IP 地址返回给操作系统，同时自己也将 IP 地址缓存起来；
  6. 操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起来；
  7. 至此，浏览器已经得到了域名对应的 IP 地址。

二、IP与域名的关系

  • IP 地址与域名不是一一对应的关系：可以把多个提供相同服务的服务器 IP 设置为同一个域名，但在同一时刻一个域名只能解析出一个 IP地址；同时，一个 IP 地址可以绑定多个域名，数量不限；

哈哈，我找到你在哪了

确定了服务器的 IP 地址后，浏览器便开始与服务器建立连接了。

当浏览器确定了服务器IP地址后，连接就正式开始啦。
服务器：可是，咱们萍水相逢，凭啥一上来就想看我包里装了什么？
客户端：既然如此，咱们就建立互相信任的关系吧。

建立连接 —— 三次握手

  1. 主机向服务器发送一个建立连接的请求（您好，我想认识您）；
  2. 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
  3. 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。

什么？就那么简单？NO，NO，NO，请查看这里详细了解这个过程。

给我看看你背包里有什么吧

当服务器与主机建立了连接之后，主机便开始与服务器进行通信。

客户端：现在咱们的关系够铁了吧，来来来，看看你背包里有些啥玩意。
服务器：虽然我们很铁了，但是我爸爸说了，不能随便给别人看背包。
服务器：你说你想要啥，我拿给你。
客户端：。。。

网页请求与显示

  1. 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
  2. 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
  3. 服务器将得到的 HTML 文件发送给浏览器；
  4. 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
  5. 在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML ；

网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程。

东西拿到啦，我要开始干活啦

在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页

客户端：哈哈哈哈，拿到我想要的东西啦，我现在开始干活了。

浏览器解析渲染数据

要说浏览器的解析渲染，首先咱们应该了解一下浏览器的内部组件。
浏览器内部拥有几个组件，包括UI后端、JS解释器、网络、浏览器引擎、渲染引擎以及其它异步引擎。
其中，UI后端的作用就是用来绘制类似组合选择框及对话框等基本组件，其具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
当浏览器获得服务器的html文件后，会进行以下几个步骤：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

具体过程：

  1. 渲染引擎开始解析html，并将标签转化为内容树中的dom节点
  2. 解析外部CSS文件及style标签中的样式信息
  3. 这些样式信息以及html中的可见性指令将被用来构建render树
    (Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上)
  4. Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标
  5. 接着浏览器开始绘制，即遍历render树，并使用UI后端层绘制每个节点。
    (值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容)

那么浏览器究竟是怎么构建DOM、Render树的呢？点我查看更多知识噢

天底下没有不散的宴席

客户端与服务器断开连接

服务器：我爸叫我回家吃饭了，我赶走了
客户端：好
这时客户端犹豫了半刻。。。
客户端：你再等等，让我想想还有没有什么漏问了
服务器：。。。

断开连接–四次挥手

  1. 主机向服务器发送一个断开连接的请求（不早了，我该走了）；
  2. 服务器接到请求后发送确认收到请求的信号（知道了）；
  3. 服务器向主机发送断开通知（我也该走了）；
  4. 主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；

补充：

  • 为什么服务器在接到断开请求时不立即同意断开：当服务器收到断开连接的请求时，可能仍然有数据未发送完毕，所有服务器先发送确认信号，等所有数据发送完毕后再同意断开。
  • 第四次握手后，主机发送确认信号后并没有立即断开连接，而是等待了 2 个报文传送周期，原因是：如果第四次握手的确认信息丢失，服务器将会重新发送第三次握手的断开连接的信号，而服务器发觉丢包与重新发送的断开连接到达主机的时间正好为 2 个报文传输周期。