Web性能优化小结

• 下载性能

  • 消灭重定向
  • 域名收敛，减少DNS解析
  • 减少文件数量（减少TCP连接数）
  • 压缩文件体积
  • CDN
  • 客户端缓存

• 渲染性能

  • 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" />