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

# 浏览器渲染过程

https://www.w3.org/TR/navigation-timing/

缓存层：prompt for unload、redirect、App cache 网络层：DNS、TCP、Request、Response 渲染层：Processing、onload

An image unload是指卸载掉了上一个页面，与重定向是并发的。 redirect在浏览器缓存中寻找，缓存以索引形式存在。找到页面是否下载过，并且判断文件是否支持脱机浏览。(很早之前浏览器支持脱机浏览)前提文件没有过期 DNS部分的优化使用CDN Http是基于Tcp和Udp，Tcp是IO传输,每次请求都要握手挥手，所以可以优化，复用连接。 TCP部分优化由底层程序员处理 HTTP1、2、3 长连接 TCP secureConnection安全连接时间 https 基于SSL连接所以时间比较长 Requset->Resopnse之前考虑服务器的性能数据质量等等 Resoponse部分就是压缩文件类型(text img等速度是不一样的)和压缩之前的权衡 Processing domloading先把dom加载都内存里 domInteractive生成dom节点 domcontentloaded内容加载 domcomplete完毕

An image

navigationStart 加载起始时间
redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0）
redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间。其他情况则返回0）
fetchStart 浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间
domainLookupStart 查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart
domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求，同上
connectStart 开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd
(secureConnectionStart) 如果在进行TLS或SSL，则返回握手时间
connectEnd 完成TCP链接的时间。如果是keep-alive，缓存等，同connectStart
requestStart 发起请求的时间
responseStart 服务器开始响应的时间
domLoading 从图中看是开始渲染dom的时间，具体未知
domInteractive 未知
domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
domComplete 从图中看是dom渲染完成时间，具体未知
loadEventStart 触发load的时间，如没有则返回0
loadEventEnd load事件执行完的时间，如没有则返回0
unloadEventStart unload事件触发的时间
unloadEventEnd unload事件执行完的时间

# 简单用法

DNS解析时间： domainLookupEnd - domainLookupStart TCP建立连接时间： connectEnd - connectStart

白屏时间： responseStart - navigationStart dom渲染完成时间： domContentLoadedEventEnd - navigationStart 页面onload时间： loadEventEnd - navigationStart

let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,4
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;

dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime , '\nTCP建立时间:', tcpTime, '\n首屏时间:', firstPaintTime,
 '\ndom渲染完成时间:', domRenderTime, '\n页面onload时间:', loadTime);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# DNS详情

DNS域名系统，用于讲域名转换成IP,人脑适合文本，机器适合数字。

# 域名解析

An image 1、客户端 2、DNS服务器先看看缓存里有没有再去找根服务器根服务器根据后缀告诉你去那个TLD服务器上找 3、根服务器负责维护全球互联网域名的解析负责协调（十几台中国一台都没有）告诉你去那个TLD服务器上找 4、只管顶级域名告诉你顶级域名是那个服务器维护 5、具体某个域名解析IP是多少传给DNS服务器并让之缓存

DNS服务器解析这么复杂，所以很多大厂都会选择把3、4、5的数据镜像下来但是换机子A->B就需要重新给镜像备份数据（阿里云配置域名，需要等十几分钟才能生效，因为要同步镜像数据） An image

# TCP三次握手与四次挥手

An image 从数据发送端开始，应用层到物理层不断加上头（洋葱），到物理层比特流传输 0101 每一层都要对上一层负责，每一层都要对下一层调用

# TCP协议模型详解

An image TCP头很小几十个字节源端口：Source Port 目的端口Destination Port 顺序号：Sequence Number 应答号：Acknowledgment Number TCP控制指令 Options 谁主动找上去谁是客户端，谁等着被连接说是服务器。 SYN指令填写在options seq 顺序号如果大数据包出错那么数据包就要全部重发，TCP要把大数据把拆成小数据包，小数据包需要有顺序号，服务器接收后要把小数据包组装成大数据包。 ACK应答指令 建立三次握手 1、SYN_SENT->SYN_RCVD SYN seq=x(客户端编号规则) 2、SYN_RCVD->ESTABLISHED SYN seq=y(服务端编号规则) ACKACK=x(应答客户端那个顺序的包)+1 3、ACK=y+1 黑客常用攻击执行1、2但是客户端回应3 导致套接字积累越来越多残缺连接越来越多 数据传输 进行多次通讯 1、seq=x+1 ACK=y+1 2、ACK=x+2 断开四次挥手 正常情况下客户端主动断开连接，异常情况下服务端可以主动断开连接 1、FIN seq=x+2 ACK=y+1 2、ACK=x+3 3、FIN seq=y+1 (半连接状态) 服务器应答的适合发两个包（先告诉客户端我收到了发送指令）(把没干完的活继续干完给客户端发送断开请求) 4、ACK=y+2 客户端向服务器发出确认

# 缓存机制

An image Etag和Last-Modified区别是，一个是唯一标识(MD5)一个是时间戳 etag: "56d69716-d5" last-modified: Wed, 02 Mar 2016 07:32:38 GMT

← 前后端分离用户验证前端架构与性能优化那些事 →