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

作者: 神秘者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做加速,就是在不同的地方访问,会给你请求最近的服务器

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

    相关文章

      网友评论

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

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