web性能优化

• 下载性能

  • 消灭重定向

  • 域名收敛，减少DNS解析

  • 减少文件数量（减少TCP连接数）

  • 压缩文件体积

  • CDN

  • 客户端缓存

  • 开启Gzip

• 渲染性能

  • CSS放顶部

  • JS放底部

• 心理性能

  • 进度条

  • 有效提示

  • 转“菊花”

• 移动网络的“空口”信道

• TCP

  • 慢启动：不同的应用类型获得的连接资源不公平——下载 vs 网游

  • Head-of-line blocking

  • HTTP无法多路复用TCP连接（HTTP2可以）

  • 三次握手和四次挥手过程冗余（TCP Fast Open，QUIC）

• 预解析和预加载

# DNS预解析
<link rel="dns-prefetch" href="www.xxx.com" />
# 页面预获取（提前下载了页面代码，没有渲染）
<link rel="prefetch" href="www.xxx.com/index.html" />
# 页面预加载（提前下载了页面代码，并渲染）
<link rel="prerender" href="www.xxx.com/index.html" />

摘自 Web性能优化小结