
大家平时上网只是知道输入网址然后回车就显示网页出来,但是有没有注意这背后到底发生什么事情呢?来来来,今天给大家介绍一下

上面这张图是简单的介绍HTTP协议的步骤,具体里面的细节还是有很多的,下面这张图就是详细的介绍了整个流程的细节

1.Prompt for unload : 在前一个页面加载之前,初始化页面,是预先加载一些前一个页面与下一个页面的公共数据,及初始化上下文
2.redirect:页面重定向
2.1:redirectStart是否做过缓存,做过缓存就做本地跳转开始
2.2:redirectEnd是否做过缓存,做过缓存就做本地跳转结束
3.APP cache:页面缓存,是缓存就从缓存中拿数据,没有缓存就略过这步骤
3.1:fetchStart 拿缓存数据开始
4.DNS:DNS解析
4.1:domainLookupStart DNS域名解析开始
4.2:domainLookupStart DNS域名解析结束
5.TCP:进行TCP三次握手,创建HTTP通路
5.1:connectStart TCP连接开始
5.2:secureConnectionStart TCP安全连接开始
5.1:connectEnd TCP连接结束
6.Request:请求数据
6.1:requestStart:请求开始
7.Response:服务器返回数据
7.1:responseStart:返回数据开始
7.2:responseEnd:返回数据结束
8.Processing:加载dom骨架
8.1:domloading 正在形成dom树结构
8.2:domInteractive 完成dom树结构
8.3:domContentLoaded 正在加载dom树内容
8.4:domComplete dom树结构和内容加载完成
(记得,Processing这个过程只是加载dom树结构,对于加载css和js这些是在onload之后加载进来的)
9.onload:页面渲染
9.1:loadEventStart load事件加载开始
9.2:loadEventEnd load事件加载结束
10.unload:页面卸载
10.1 unloadEventStart 卸载页面开始
10.2 unloadEventEnd 卸载页面结束
要进行网络层的性能优化,必须要掌握整个流程的每一个细节

DNS的数据结构

域名的分类:1.顶级域名,2.二级域名 3.三级域名
类似于baidu.com就是顶级域名 ,news.baidu.com就是二级域名,ppp.news.baidu.com就是三级域名

上面的图就是域名树结构,全世界只有13台根域名服务器,13台根域名服务器是远远不够的,需要我们从根域名服务器同步数据分发到其他服务器上面去,在根域名服务器里面的内容是最权威的,其他域名服务器做真正的内容解析


tcp分层


tcp数据包结构图

序列号在tcp头是至关重要的,因为在网络传入的时候是分一段一段的数据包来传送的,有可能每一段的数据包是通过不同的路由来传送的,这样子序列号就起到了拿到每段数据包后,按照序列号来拼接数据
可以登录linux ssh root@120.78.73.247

使用traceroute www.baidu.com就可以把访问百度的中间路由显示出来
在window系统 用tracert www.baidu.com

tcp三次握手讲解,tcp连接是客户端发起的,先发起连接请求SYN seq=x,服务器通过ACK(应答号) = x+1返回给客户端SYN seq = y 客户端又发送ACK = y+1给服务器,服务器接收到应答,双方连接成功,三次握手完成,然后进行数据传输
为什么第三次握手还要想客户端发信息来确认的,因为在tcp下面还有三层,如果下面的层不稳定,tcp连接也需要重新建立
如果第三步失败了,客户端认为连接是成功的,但是服务器认为是失败的,所以客户端还是会发送数据给服务器,但是服务器认为是失败的,就没有搭理客户端,所以整个tcp连接还是失败的,需要建立tcp连接
tcp四次挥手:客户端想服务器发起断开请求,我要断开了,然后服务器收到信息,想客户端发送确认信息,我知道 你要断开了,然后确认是否还有数据要给客户端发送的,如果没有就发送第三次确认,我已经没有数据要给你了,最后客户端给服务器发送,好的,收到了
linux下抓包
先安装yum install tcpdump

下面是对www.baidu.com来进行抓包
先ping www.baidu.com拿到www.baidu.com的服务器的ip


然后另开一个窗口
curl http://www.baidu.com 相当于对百度一个get请求






CDN就是分布式的运用,一般对静态资源放在CDN做加速,就是在不同的地方访问,会给你请求最近的服务器
总结,上面是前端都需要了解的服务器的知识,这里只是对内容的一些见解,还需要大神们的指点
网友评论