性能优化

参考 #

• Web Performance - MDN
• Front-End-Performance-Checklist - GitHub
• 前端性能优化 - 掘金
• 性能优化｜几个方法让图片加载更快一些 - 微信公众号（阿里云开发者）文章
• 3.40秒到231.84毫秒，我用Performance面板分析性能瓶颈全流程 - 掘金
• 7000 字前端性能优化总结 | 干货建议收藏 - 微信公众号文章
• vue 项目你一定会用到的性能优化！ - 掘金
• 前端性能优化到底该怎么做（下）— 直捣黄龙 - 掘金
• 你知道的前端优化手段 - 掘金
• 从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载 - 掘金
• 我优化了进度条，页面性能竟提高了 70% - 微信公众号文章
• 聊一聊前端性能优化 - 掘金

原则 #

• 减小资源大小
• 提高响应和加载速度
• 优化资源加载时机
• 优化加载方式

加载时性能优化 #

1. DNS 预解析
2. 使用 HTTP2
3. Gzip 压缩传输
4. 缓存
5. 静态资源使用 CDN
6. preload / prefetch
7. 服务器端渲染
8. 压缩、合并文件
9. 按需加载代码，减少冗余代码
10. 使用 defer / async 加载 JS
11. 图片优化（压缩、懒加载）
12. 采用 svg 图片或者字体图标

运行时性能优化 #

1. 减少重绘与重排
2. 避免页面卡顿
3. 长列表优化
4. 滚动事件性能优化
5. 使用 Web Workers

prefetch/preload #

• 浏览器页面资源加载过程与优化 - 掘金
• 用 preload 预加载页面资源 - 掘金
• App 内网页启动加速实践：静态资源预加载视角 - 微信公众号文章

preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源
prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源

默认的加载优先级规则：

1. html、css、font 这三种类型的资源优先级最高；
2. 然后是 preload 资源（通过<link rel="preload">标签预加载）、script、xhr 请求；
3. 接着是图片、语音、视频；
4. 最低的是 prefetch 预读取的资源。