从输入url，到页面渲染都发生了什么

ISO七层模型	中间操作	协议
应用层	DNS解析成IP并发送http请求	dns,http
表示层	---	---
会话层	---	---
传输层	建立tcp连接（三次握手）	tcp,udp
网络层	网络层IP寻址	IP,ARP
数据链路层	数据链路层的封装成帧	PPP
物理层	利用物理介质传输比特流	---

CDN概念

CDN(Content Delivery Network)是指内容分发网络，是为了解决速度问题和压力问题

左图就是单节点服务模式，所有的用户都访问同一台服务器，这样由于访问用户的数量和地理位置的不同，会给服务器很大的压力，并且响应速度会变慢。

右图就是CDN模式，CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户。

navigation timing

图片来源 www.w3.org/TR/navigati…

描述的是服务器请求到回来的的步骤，每个步骤起始都对应一个标签，本质上是一个计时器，可以计算来检查哪些步骤存在瓶颈。

Window.performance

MDN performance

// 各阶段时间计算，可以直接复制到控制台查看效果
let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
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 , '
TCP建立时间:', tcpTime, '
首屏时间:', firstPaintTime,
 '
dom渲染完成时间:', domRenderTime, '
页面onload时间:', loadTime);

准备阶段

unload：释放前一页面资源，准备重定向预取资源，连接tcp（网速慢中间会显示白屏）
redirect
app cache 检查缓存策略，是强缓存，还是协商缓存
DNS dns解析，获取服务器ip
TCP 建立通信，准备发请求

缓存机制

缓存会根据请求保存输出内容的副本，例如html页面，图片，文件，当请求来的时候，如果是相同的url，缓存会使用副本响应请求，而不是像源服务器再次发送请求

强缓存还是协商缓存

强缓存：不会向服务器发送请求，直接命中内存中的缓存资源，从chrome Network中可以看到资源200且from disk cache或from memory cache。
协商缓存：向服务器发送请求，服务器根据request header内的参数来判断是否需要更新此资源，如果不需要更新，服务器返回304的状态码，然后通知浏览器读取本地缓存。

浏览器第一次访问

graph LR

id1(浏览器请求) --> 无缓存  --> 向web服务器请求  --> 请求响应协商缓存  --> id2(呈现)

是否缓存Expires、cache-control、缓存时间、Etag·Last-Modified

浏览器再次请求

浏览器缓存过程

浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；；
如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；

DNS解析

DNS是 Domian Name System，域名系统，用于将域名转换为IP。

以www.baidu.com为例来分析下DNS的解析步骤，

电脑发送一个DNS请求到本地服务器（一般由服务商提供，联通，移动），如果有返回结果
向DNS根服务器进行查询（www），并给出域服务器的地址
向DNS域服务器进行查询（.com），给出域名的解析服务器的地址
向域名的解析服务器发出请求（baidu），返回IP地址，并且保存在缓存里

请求响应阶段

Request：从第一字节发送开始，到返回第一个字节为止
Response：取决于服务器响应时间

三次握手和四次挥手

序号：表示发送的数据字节流，确保TCP传输有序，对每个字节编号。确认序号：发送方期待接收的下一序列号，接收成功后的数据字节序列号加1，只有ACK=1时才有效。ACK：确认序号的标志，ACK=1表示确认号有效，ACK=0表示报文不含确认序号信息。SYN：连接请求序号标志，用于建立连接，SYN=1表示请求连接，FIN：结束标志，用于释放连接，为1表示关闭本方数据流。

三次握手

问：三次握手是什么？ 答：客户端和服务端要进行3次通信。

问：为什么是三次握手？

答：

第一次：客户端发送请求到服务器，服务器知道客户端发送，自己接收正常。SYN=1,seq=x
第二次：服务器发给客户端，客户端知道自己发送、接收正常，服务器接收、发送正常。ACK=1,ack=x+1,SYN=1,seq=y
第三次：客户端发给服务器：服务器知道客户端发送，接收正常，自己接收，发送也正常.seq=x+1,ACK=1,ack=y+1

四次挥手

问：什么是四次挥手？

答：

第一次挥手：客户端发出释放FIN=1，自己序列号seq=u，进入FIN-WAIT-1状态
第二次挥手：服务器收到客户端的后，发出ACK=1确认标志和客户端的确认号ack=u+1，自己的序列号seq=v，进入CLOSE-WAIT状态
第三次挥手：客户端收到服务器确认结果后，进入FIN-WAIT-2状态。此时服务器发送释放FIN=1信号，确认标志ACK=1，确认序号ack=u+1，自己序号seq=w，服务器进入LAST-ACK（最后确认态）
第四次挥手：客户端收到回复后，发送确认ACK=1，ack=w+1，自己的seq=u+1，客户端进入TIME-WAIT（时间等待）。客户端经过2个最长报文段寿命后，客户端CLOSE；服务器收到确认后，立刻进入CLOSE状态。

问：为什么是四次挥手而不是三次？

答：当收到对方的 FIN 报文时，仅仅表示对方不再发送数据了但是还能接收数据，己方是否现在关闭发送数据通道，需要上层应用来决定，因此，己方 ACK 和 FIN 一般都会分开发送。