网络优化
- 减少请求数：样式脚本合并、图片合并及替代、
- 优化带宽：GZip，C 图片压缩、代码压缩去重
- 利用缓存： 使用 CDN、利用客户端缓存、减少 DNS 查询、请求缓存
- 加载策略：延迟加载、预加载
HTTP 协议优化
- http1：存在对头阻塞和 tcp 启动慢的问题
- http2：采用分帧和多路复用解决了对头阻塞的问题，同时还做了头压缩、服务端 push 等优化方案
- http3：使用 QUIC 解决 tcp 协议启动慢合和阻塞问题
域名策略
DNS 预解析，客户端可以提前进行 DNS 解析并缓存，之后的请求可以直接使用缓存，提升速度页面加载速度。浏览器默认会自动扫描当前页面中 domain 并进行 DNS 解析，这个解析过程不会阻碍页面的渲染。一般情况下浏览器仅会扫描 HTML 页面中出现的 domain，在 HTML 之外的 domain(例如 JavaScript 请求、或者是站点内其他页面使用的 DNS)浏览器不会自动进行预加载。我们可以设置预解析列表，如下：
<link rel="dns-prefetch" href="//example.com">
<!-- preconnect可以用在请求资源前，预先完成 DNS lookup + TCP handshake + TLS handshake（如果是https） -->
<link rel="preconnect" href="https://example.com">
HTTP1.1 域名收敛和域名发散，合理利用并发，加速资源下载
浏览器阻塞：浏览器对应同一个域名同时建立的连接数量是有限制的，不同厂商各有区别，最多不要超过 8 个，当请求数量超过最大限制后，后面的请求会被阻塞。 建立多个连接同时进行下载可以提升下载速度，但是建立连接是比较费时的，需要根据具体项目进行优化。
域名发散是将页面的静态资源放在多个域名下，客户端在加载资源是充分利用并发请求(单个域名下的并发数量有限制)； 域名收敛是为了减少 DNS 查询，降低 DNS 查询的性能损耗，移动端优化方案；
利用本地缓存
预加载和和懒加载
浏览器缓存方式和位置
按优先级
- Service Worker：Service Worker 是运行在浏览器背后的独立线程使用 Cache Storage 存储数据。可以利用 Service Worker 的请求拦截能力定制化的实现缓存。
- Memory Cache：内存缓存，时效短、存储空间有限。
prefetch和preload会使用内存缓存 - Disk Cache：硬盘缓存，存储时间长、存储空间接近无限制。HTTP Cache 使用的就是硬盘缓存
- TODO:Push Cache：HTTP2 推送缓存