前端性能优化必备服务器知识

image.png

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

image.png

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

image.png

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 卸载页面结束

要进行网络层的性能优化，必须要掌握整个流程的每一个细节

image.png

DNS的数据结构

image.png

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

image.png

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

image.png

image.png

tcp分层

image.png

image.png

tcp数据包结构图

image.png

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

可以登录linux ssh [email protected]

image.png

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

在window系统用tracert www.baidu.com

image.png

tcp三次握手讲解，tcp连接是客户端发起的，先发起连接请求SYN seq=x，服务器通过ACK（应答号） = x+1返回给客户端SYN seq = y 客户端又发送ACK = y+1给服务器，服务器接收到应答，双方连接成功，三次握手完成，然后进行数据传输
为什么第三次握手还要想客户端发信息来确认的，因为在tcp下面还有三层，如果下面的层不稳定，tcp连接也需要重新建立

如果第三步失败了，客户端认为连接是成功的，但是服务器认为是失败的，所以客户端还是会发送数据给服务器，但是服务器认为是失败的，就没有搭理客户端，所以整个tcp连接还是失败的，需要建立tcp连接

tcp四次挥手：客户端想服务器发起断开请求，我要断开了，然后服务器收到信息，想客户端发送确认信息，我知道你要断开了，然后确认是否还有数据要给客户端发送的，如果没有就发送第三次确认，我已经没有数据要给你了，最后客户端给服务器发送，好的，收到了

linux下抓包
先安装yum install tcpdump