DNS(domain name system)
给出一个域名,返回一个ip地址
浏览器缓存 👉 操作系统缓存(host) 👉 ISP(移动联通)
TCP(transmission control protocol)
3次握手
A syn(x) B
B ack(x+1) syn(y) A
A ack(y+1) B
第三次确保客户端可以发送也可以接收(开始时,x,y一般是0)
4次挥手
A fin(x) B
B ack(x+1) A
B fin(y) A
A ack(y+1) B
关闭时x,y一般不是0
HTTP 超文本传输协议
如果不优化 一个请求 一次tcp连接
浏览器
js的下载和执行会阻塞HTML的解析,因为执行JS的时候可能会修改DOM树
css 的下载和解析会阻塞js的执行
页面渲染:
dom树、css树合成为渲染树,布局(layout大小、尺寸),绘制(paint颜色、阴影),合成(composite层次)
async 与 defer
defer 在HTML解析之后,domready之前执行, 下载完再执行,多个defer按写的顺序执行
async 下载完就执行,不能保证domready事件先后顺序,比较松散,适合于页面不相关的js
<script type="module">几乎等价于defer
dns预解析
1.index.html中<head>里写<link ref="dns-prefetch" href="https://abc.com"/>
2.在index.html响应头里写Link:<https://abc.com/>;ref=dns-prefetch
TCP优化技巧 连接复用
Connection:keep-alive(通过添加http的字段实现tcp的复用)
KeepAlive:timeout=5,max=10(5秒内请求,tcp不会中断,最多连接10次)