性能优化
参考
- Web Performance - MDN
- Front-End-Performance-Checklist - GitHub
- 前端性能优化 - 掘金
- 性能优化｜几个方法让图片加载更快一些 - 微信公众号（阿里云开发者）文章
- 3.40秒到231.84毫秒，我用Performance面板分析性能瓶颈全流程 - 掘金
- 7000 字前端性能优化总结 | 干货建议收藏 - 微信公众号文章
- vue 项目你一定会用到的性能优化！ - 掘金
- 前端性能优化到底该怎么做（下）— 直捣黄龙 - 掘金
- 你知道的前端优化手段 - 掘金
- 从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载 - 掘金
- 我优化了进度条，页面性能竟提高了 70% - 微信公众号文章
- 聊一聊前端性能优化 - 掘金
原则
- 减小资源大小
- 提高响应和加载速度
- 优化资源加载时机
- 优化加载方式
加载时性能优化
- DNS 预解析
- 使用 HTTP2
- Gzip 压缩传输
- 缓存
- 静态资源使用 CDN
- preload / prefetch
- 服务器端渲染
- 压缩、合并文件
- 按需加载代码，减少冗余代码
- 使用 defer / async 加载 JS
- 图片优化（压缩、懒加载）
- 采用 svg 图片或者字体图标
运行时性能优化
- 减少重绘与重排
- 避免页面卡顿
- 长列表优化
- 滚动事件性能优化
- 使用 Web Workers
prefetch/preload
- 浏览器页面资源加载过程与优化 - 掘金
- 用 preload 预加载页面资源 - 掘金
- App 内网页启动加速实践：静态资源预加载视角 - 微信公众号文章
preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源
prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源
默认的加载优先级规则：
- html、css、font 这三种类型的资源优先级最高；
- 然后是 preload 资源（通过
<link rel="preload">标签预加载）、script、xhr 请求； - 接着是图片、语音、视频；
- 最低的是 prefetch 预读取的资源。
INFO
在 VitePress 生成的页面中，首页的资源均使用 preload，而路由对应的资源，则使用 prefetch