Web性能优化指南

2021.1.19 星期二

天下武功唯快不破
E = mc^2

# 页面加载原理

从浏览器加载页面的流程，可以看到主要从两个大方向入手：
1）资源通过网络层传输/接收
减少请求数，降低请求量

2）浏览器解析/渲染资源
减少重绘&回流

# 网站性能优化

资源/网络传输

资源查找和传输

每一次主机名解析都需要一次网络往返，从而增加请求的延迟时间，同时还会阻塞后续请求。

适当控制网页中域名数量（但并不是越少越好。http1.1下多域名可以建立多个tcp连接，并发http请求）；
利用DNS 预解析（dns-prefetch）

合并样式、脚本文件、图片；CSS3图标、Icon Font
使用图片的地方用其他方式替代：css样式/动画，icon，svg等。

HTTP 重定向极费时间，特别是不同域名之间的重定向，更加费时；这里面既有额外的 DNS 查询、TCP 握手，还有其他延迟。
最佳的重定向次数为零。

缩短传输距离，而且服务器大多有缓存。

使用外部Javascript和CSS
① 开启GZip，brotli。webp
② 优化静态资源。去除冗余代码：log、comment ；uglify
③ 图片无损压缩，恰当的图片格式。
④ 图片延迟加载。
⑤ 减少Cookie携带

很多时候，我们也会采用类似“时间换空间、空间换时间”的做法

服务端缓存。
http缓存。配置ETag
浏览器缓存。dns，资源，数据。

控制资源加载顺序/优先级。
并行加载。域名分片

按需/异步加载：顺序，数据量大小（滚动）
preload, prefetch, prerender， preconnect
async, defer

渲染需要的css等文件放head，javascript文件尽量放在body结尾。

Critical CSS 加快首屏渲染

http2：头部压缩、二进制分帧、多路复用，server push等优势。
可以解决http1.1 队头堵塞问题。而且前面提到的合并请求资源数量，并行加载就当做参考项了。也没必要再使用域名分片来解决并发限制了

QUIC(Quick UDP Internet Connections)：基于UDP+Http2的一个实验性的快速传输协议。
遇到丢包情况也不会重传，从而进一步减少网络延迟、解决队头阻塞问题。

websocket
webRTC

https
多了安全层Transport Layer Security (TLS)，会增加新的请求。但这是必须的，chrome推进后大多数网站都添加了https。

但是，减少请求量、使用缓存、减少dns查找等的优化方案无论在哪个版本都同样适用。

html5
优化层级结构
语义化标签

减少嵌套层级，优化css路径
低权重原则——-避免滥用子选择器
进可能使用class（少用id），而不是tag 或 attr 选择器。
精简CSS代码。缩写，0，单位，空格，注释
合理使用layer层
合理利用GPU加速：动画

避免CSS表达式

js是单线程的。

减少对DOM的操作，避免造成页面的Repaint和Reflow；或合并一些dom操作, Virtual DOM。
ajax。避免发送多次/重复请求
requestAnimationFrame & requestIdleCallback
也可以利用web worker

es module

ArrayBuffer
PWA
indexedDB
WebAssembly
WebGL
~~WebCL~~

新的图片/视频格式。 avif， av1