web性能优化1

76 阅读1分钟

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次)

TCP优化技巧 并行连接