通过网址访问HTML文件,你知道从你打开浏览器输入网址，到网页通过浏览器展现在你面前的背后发生了什么吗？...

前言

这两天总看到这么一个问题“就是浏览器打开网页的背后都发生了什么吗？”虽然自己也不是大佬，也是菜鸟一枚，那我就根据我的一点总结经验，来说一说这个都发生了什么，希望能对大家有帮助！

我觉的这个问题可以分为三部分:

1.IP的查找

2.HTTP的请求和响应

3.浏览器的解析

那我们来分别说说这三部分都包括了哪些

一、IP的查找

IP的查找里也分为很多小步骤

ip格式的验证

我们会想这样一个场景，就是我们正常的输入网址啊(我说是正常！正常！正常！)

不管是www.baidu.com还是www.google.com我们都输入了一个已知的且正确的网址,那么你试过输入这样的网址吗 www.bau.com，会有什么结果？

捕获.JPG

没错像这样，格式根本不通过检验，所以也不会有下一步的进行，那么如果格式通过了，后面会怎么进行呢？

协议的选用

我们还是会想刚才的场景，正常输入网址的情况下，我们都不会选择http或者https协议，可以当回车按下去我们再看网页的地址

捕获.JPG

没错前面自动加上了协议，是https协议，一般如果网址没有规定协议那么浏览器默认的协议就是添加http协议，如果网址规定了协议那么就以网站的协议为准

ip的查找

假设前两步都通过了，我们来说说IP的查找，这就有这么一个知识点，其实当我们去访问一个网址，实际上是根据IP来访问这个网址，但是没有人会记这么一串数字192.186.xxx.xxx，通常都是www.xxx.com/cn之类的那么根据输入的URL来找到到对应的IP实现成功访问，这就出现了这步IP的查找

查找里面也分为三步

host文件的查找

host文件一般在这里,这里说一下host文件是什么，是用来保存域名以及域名对应的IP地址

C:\Windows\System32\drivers\etc

Inked捕获_LI.jpg

这里面如果有该域名对应的IP则直接访问，如果没有则进行下一步

DNS 服务器的查找

如果在host文件里没有找到，那么会去查询本地DNS服务器，默认是采用ARP广播的形式查询，返回IP=MAC这样的形式

根服务器的查找

如果在DNS服务器里面也没找打ip我们最后回去根服务器查找，比如查找>www.baidu.com

会依次查找com的IP，在查找baidu的IP最后查找www的IP，拿到www的IP就是我们要访问的IP地址，这里是百度的IP地址

到这里，我们已经知道了IP的地址，DNS把地址返回给浏览器，我们进行下一步

二、HTTP的请求和响应

这里举个例子，比如说你要去别人家串门，你要先问问主人在不在家，这里也是一样，需要先建立连接才能去访问，所以这里产生的TCP的三次握手具体过程如下：

第一次握手：主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机；

第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包

第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接建立成功

f0d6cfc28fe892c8abfc4ad3c9c3df6c_hd.png

如果还是有点蒙具体可以参考这个，写的很详细TCP三次握手和四次挥手

接下来就是HTTP请求，HTTP请求分为这么几种：(GET, POST, HEAD, PUT 和 DELETE)通常我们访问浏览器GET请求最多，在举个例子，比如我们访问百度贴吧

tieba.baidu.com/index.html

这算是百度里的一个子类，你可以这么理解，baidu.com这是域名，百度下的所有资源都这这里域名里，tieba这个域名的分类，/ 代表请求的路径，和我们电脑文件夹的 / 同理，整个URL的意思就是，访问百度域名下的，贴吧分类的index.html页面，接下来服务器还可以对用户身份的一系列检验IP信息Cookie信息等，请求成功后，服务器会返回浏览器一个response类型的文件

三、浏览器的解析

上面的步骤全部都成功之后，会有一个response类型的文件返回给浏览器，我们并不认识这个文件的内容，就算认识了也很不方便，所以浏览器要对其进行解析

解析 HTML，CSS，JS类型的文件

进行一系列的页面的渲染、 布局 、绘制等操作

如果有AJAX请求产生，浏览器还会提交这个AJAX请求，及时进行页面的更新

四、后记

本人也是菜鸟一枚，如果有写的不对的地方还请大佬们支出，如果对你有一些帮助，那就再好不过了，最后惯例连接 GitHub上的回答