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

作者: 神秘者007 | 来源:发表于2018-03-01 12:41 被阅读26次
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 root@120.78.73.247

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

image.png
下面是对www.baidu.com来进行抓包
先ping www.baidu.com拿到www.baidu.com的服务器的ip
image.png
image.png
然后另开一个窗口
curl http://www.baidu.com 相当于对百度一个get请求 image.png
image.png
image.png
image.png
image.png
image.png

CDN就是分布式的运用,一般对静态资源放在CDN做加速,就是在不同的地方访问,会给你请求最近的服务器

总结,上面是前端都需要了解的服务器的知识,这里只是对内容的一些见解,还需要大神们的指点

相关文章

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

    事务:事务必须服从ACID原则。ACID指的是原子性(atomicity)、一致性(consistency)、隔离...

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

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

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 大型网站技术架构(3):WEB 前端性能优化

    上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 性能优化

    +WEB前端性能优化:HTML,CSS,JS和服务器端优化对前端开发工程师来说,前端性能优化的重要性是不言而喻的,...

  • Java基础-优化

    网站性能优化 前端性能优化 应用服务器性能优化 解决线程安全的方法: 将对象设计成无状态对象,如Servlet 使...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

网友评论

    本文标题:前端性能优化必备服务器知识

    本文链接:https://www.haomeiwen.com/subject/amowxftx.html