你知道从你打开浏览器输入网址,到网页通过浏览器展现在你面前的背后
前言
这两天总看到这么一个问题“就是浏览器打开网页的背后都发生了什么吗?”虽然自己也不是大佬,也是菜鸟一枚,那我就根据我的一点总结经验,来说一说这个都发生了什么,希望能对大家有帮助!
我觉的这个问题可以分为三部分:
1.IP的查找
2.HTTP的请求和响应
3.浏览器的解析
那我们来分别说说这三部分都包括了哪些
一、IP的查找
IP的查找里也分为很多小步骤
- ip格式的验证
捕获.JPG我们会想这样一个场景,就是我们正常的输入网址啊(我说是正常!正常!正常!)
不管是www.baidu.com还是www.google.com我们都输入了一个已知的且正确的网址,那么你试过输入这样的网址吗 www.bau.com,会有什么结果?
没错像这样,格式根本不通过检验,所以也不会有下一步的进行,那么如果格式通过了,后面会怎么进行呢?
- 协议的选用
捕获.JPG我们还是会想刚才的场景,正常输入网址的情况下,我们都不会选择http或者https协议,可以当回车按下去我们再看网页的地址
没错前面自动加上了协议,是https协议,一般如果网址没有规定协议那么浏览器默认的协议就是添加http协议,如果网址规定了协议那么就以网站的协议为准
- ip的查找
假设前两步都通过了,我们来说说IP的查找,这就有这么一个知识点,其实当我们去访问一个网址,实际上是根据IP来访问这个网址,但是没有人会记这么一串数字192.186.xxx.xxx,通常都是www.xxx.com/cn之类的那么根据输入的URL来找到到对应的IP实现成功访问,这就出现了这步IP的查找
查找里面也分为三步
- host文件的查找
host文件一般在这里,这里说一下host文件是什么,是用来保存域名以及域名对应的IP地址
Inked捕获_LI.jpgC:\Windows\System32\drivers\etc
这里面如果有该域名对应的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的包
f0d6cfc28fe892c8abfc4ad3c9c3df6c_hd.png第三次握手:主机A收到后检查ack number是否正确,即第一次发送的seq number+1,以及位码ack是否为1,若正确,主机A会再发送ack number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连接建立成功
如果还是有点蒙具体可以参考这个,写的很详细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上的回答