【优化】网站优化策略
2023/07/19 16:52:34
加载策略
css 样式文件
- 抽离关键 css 并优先加载。
js 文件
预加载
dns-prefetch：允许浏览器在用户浏览页面时后台运行 DNS 的解析，这样用户在点击一个链接时已经 DNS 解析完成。
<link rel="dns-prefetch" href="//www.google-analytics.com" />preconnect：允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间。
<link rel="preconnect" href="https://cdn.domain.com" />proload：指定当前页面需要优先下载的资源。 preload 不会阻塞 onload 事件。
<link rel="preload" href="https://cdn.domain.com" />prefetch：指定浏览器空闲时需要加载的资源。prefetch 专注于下一个页面并以低优先级加载。
<link rel="prefetch" href="https://cdn.domain.com" />
减少 http 请求
HTTP1.x 中，如果项并发多个请求，必须使用多个 TCP 连接，且浏览器为了控制资源，还会对单个域名有 6-8 个的 TCP 连接请求限制。
HTTP2 中，同一个域名只需要占用一个 TCP 连接，也就没有并发 http 数量限制的问题了。
- 懒加载（模块、组件、图片等）。
- 减少 chunk 数量（合并），尺寸较小的可以直接放在 html 文档中。
资源压缩
- gzip。
- Brotli。
以上两种压缩方案都需要服务器支持并在服务端开启相关配置。
CDN 加速
通过分布式的边缘网络节点，缩短资源到终端用户的访问延迟。
浏览器缓存
开发策略
提高 css 性能
- 减少重绘重排操作，浏览器图层与重绘重排。
提高 js 性能
- 使用 web woker 处理长任务。
打包策略
参考
谷歌 Google I/O：提升 Web 核心性能指标的 9 个建议