在浏览器地址栏输入地址到页面渲染完成发生了什么？（超详细）（上）

本文主要探究 在浏览器地址栏输入地址到页面渲染完成发生了什么 这个问题。通过对这个问题的探究，详细的梳理http、https、tcp及前端性能优化相关的问题。本文涉及到前端、后台、运维相关的工作，也会涉及到很多专有名词及其衍生知识。我只能尽可能简单详尽的描述每一步的细节，最大的期望就是让小白明白，让老司机透彻。这篇文章本来想要一气呵成写完，但中途一些工作上的事耽搁了下，写着写着发现一篇已经太长了，不得不拆分，所以这篇就变成了上篇，以下是正文。

当我们在浏览器网址中输入一个地址，点击回车后发生了以下事情。分为两种情况，http事务和https事务。先讲http事务：

1、浏览器（客户端）进行地址解析。

2、将解析出的域名进行dns解析。

3、通过ip寻址和arp，找到目标（服务器）地址。

4、进行tcp三次握手，建立tcp连接。

5、浏览器发送数据，等待服务器响应。

6、服务器处理请求，并对请求做出响应。

7、浏览器收到服务器响应，得到html代码。

8、渲染页面。

通过以上这些步骤，就完成了一次完整的http事务。下面，将详细的讲述每一个步骤发生了什么。

一、浏览器（客户端）进行地址解析。

当我们在浏览器中输入一个地址，按下回车后，浏览器获取到的是一个字符串。浏览器此时要对这个地址进行解析，获取协议，主机，端口，路径等信息。

URL的一般格式为(手记会自动过滤尖括号，所以只能上传图片了)：

例如：

http://www.imooc.com/article/draft/id/430 这个网址缺少了一些东西，端口号，用户名，密码，query和flag都没有。这些东西都是非必须的，甚至协议、路径都可以不要，最简洁的方式为imooc.com，浏览器会对一些默认的东西进行补齐。例如：互联网url默认端口号为80，浏览器默认补齐功能会补齐协议http，有些还会直接在域名前面补上www。所以实际上，即使我们输入的是imooc.com，然而实际访问的却是http://www.imooc.com。

二、将解析出的域名进行dns解析。

第一步地址解析中我们已经获取到服务器的域名。此时就需要将域名换成对应的ip地址，这就是dns解析。dns解析分为以下几个步骤：

1、先查看浏览器dns缓存中是否有域名对应的ip。

2、如果没有，则查看操作系统dns缓存中是否有对应的ip（例如windows的hosts文件）。

3、依旧没有就对本地区的dns服务器发起请求，

4、如果还是没有，就直接到Root Server域名服务器请求解析。

这里面有几点需要关注：

<1>、DNS在进行区域传输的时候使用TCP协议，其它时候则使用UDP协议；

<2>、全球只有十三台逻辑根服务器，为什么是十三台，请参考https://www.zhihu.com/question/22587247?answer_deleted_redirect=true。 其中任何一次解析成功就返回对应的ip地址。

三、通过ip寻址和arp，找到目标（服务器）地址。

网络是分层的，在讲述本部分内容之前，请大家记住这个图，TCP/IP四层架构。

ip协议在第三层互联网层（网络层），arp协议在第四层网络访问层（链路层）。其实应该好好了解下osi七层架构，这里不详述，感兴趣的可以参见：https://baike.baidu.com/item/%E5%BC%80%E6%94%BE%E7%B3%BB%E7%BB%9F%E4%BA%92%E8%BF%9E%E5%8F%82%E8%80%83%E6%A8%A1%E5%9E%8B/8851889?fr=aladdin&fromid=9763441&fromtitle=OSI%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B

第二步获取到了ip，此时直接通过ip寻址找到ip对应的服务器，然后通过arp协议找到服务器的mac地址。

这里有几点需要注意：

1、ip地址（ipv4， 32位）。ip地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。ip地址分为A、B、C、D、E五大类：

A类地址：一个字节（8位）的网络地址和三个字节的主机地址。地址范围为：1.0.0.0~126.255.255.255。

B类地址：二个字节的网络地址和二个字节的主机地址。地址范围为：128.0.0.0~191.255.255.255。

C类地址：三个字节的网络地址和一个字节的主机地址。地址范围为：192.0.0.0~223.255.255.255。

D类地址：D类地址用于多点广播（Multicast），D类IP地址第一个字节以“lll0”开始，它是一个专门保留的地址。地址范围为：224.0.0.0~239.255.255.255。

E类地址： E类IP地址 以“llll0”开始，为将来使用保留。地址范围为：240.0.0.0~255.255.255.254。，255.255.255.255用于广播地址。

其中缺失了两部分，一个是0开头的，“0”表示该地址是本地主机，不能传送。一个是127开头的，127开头的是网卡自身，常用于测试。这里为什么是十进制的数字，为什么中间有‘.’，其实这都是为了方便人类而人为加上去的。转化为计算机语言就是二进制的，每一个字节八位，八位二进制能表示的最大数字就是255，这样ip地址就齐全了。可能有些人还发现ip地址为 10.170.8.61/23 ，这里涉及到局域网、保留地址和子网掩码。这里的意思是，前23位表示为该台主机的网络地址，该网络有 2^(32-23) = 512台主机。具体就不展开讲了，涉及的内容太深，太多。感兴趣的可以参考https://www.zhihu.com/question/56895036

2、IP寻址如何工作？

ip寻址主要有两种方式，一种是同一网段，一种是不同网段。要判断两个IP地址是不是在同一个网段，就将它们的IP地址分别与子网掩码做与运算，得到的结果一网络号，如果网络号相同，就在同一子网，否则，不在同一子网。

同一网段的情况：

主机A和主机B，首先主机A通过本机的hosts表或者wins系统或dns系统先将主机B的计算机名 转换为Ip地址，然后用自己的 Ip地址与子网掩码计算出自己所出的网段，比较目的主机B的ip地址与自己的子网掩码，发现与自己是出于相同的网段，于是在自己的ARP缓存中查找是否有主机B 的mac地址，如果能找到就直接做数据链路层封装并且通过网卡将封装好的以太网帧发送有物理线路上去：如果arp缓存中没有主机B的的mac地址，主机A将启动arp协议通过在本地网络上的arp广播来查询主机B的mac地址，获得主机B的mac地址厚写入arp缓存表，进行数据链路层的封装，发送数据。

不同网段的情况：

不同的数据链路层网络必须分配不同网段的Ip地址并且由路由器将其连接起来。和上面一样，主机A发现和主机B不在同一个网段，于是主机A将知道应该将次数据包发送给自己的缺省网关，即路由器的本地接口。主机A在自己的ARP缓存中查找是否有缺省网关的MAC地址，如果能够找到就直接做数据链路层封装并通过网卡 将封装好的以太网数据帧发送到物理线路上去，如果arp缓存表中没有缺省网关的Mac地址，主机A将启动arp协议通过在本地网络上的arp广播来查询缺省网关的mac地址，获得缺省网关的mac地址后写入arp缓存表，进行数据链路层的封装，发送数据。数据帧到达路由器的接受接口后首先解封装，变成ip数据包，对ip 包进行处理，根据目的Ip地址查找路由表，决定转发接口后做适应转发接口数据链路层协议帧的封装，并且发送到下一跳路由器，次过程继续直至到达目的的网络与目的主机。整个过程有点像dns解析，只是dns服务器换成了下一跳路由器，udp编程了tcp，其他差别不大。

3、arp。arp就是地址转化协议，也就是把ip地址转化为mac地址。和dns很像，先查缓存，然后查路由器。

4、mac地址。mac地址就是计算机的物理地址，每个网卡出厂时，被生产厂家烧制在网卡上。采用十六进制数表示，共六个字节（48位）。三个字节是由IEEE的注册管理机构RA负责给不同厂家分配的代码(高位24位），也称为“编制上唯一的标识符”（Organizationally Unique Identifier），后三个字节(低位24位)由各厂家自行指派给生产的适配器接口，称为扩展标识符（唯一性）。如何修改mac地址呢？一个方法就是直接修改网卡上烧制的mac地址，自己烧制。这个基本不靠谱，失误性也高。另一个方法就是修改注册表中的mac地址，因为网络中访问的mac地址都是访问的注册表中的mac地址，不会直接访问网卡。这个比较简单直接。

5、为什么有了ip地址，还要mac地址？这个问题很关键，就像是我有驾驶证了你非要让我提供身份证。这个涉及一些历史问题，因为一开始没有互联网的时候就只有mac地址，还不存在ip地址。后来互联网越来越大之后，发现mac地址找起来太麻烦，并且耗时也越来越久，就发明了ip地址。并且mac地址在一个局域网中还是很有用的，所以就两个一起存在了。详细的信息，大家可以参考https://www.zhihu.com/question/21546408。

上篇先到这里了，后续的环节在后续章节，感兴趣的可以接着往下看~