我们常提到性能好坏是由什么来衡量呢？访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长，非首次情况下，命中缓存的加载缓存数据 --> 渲染出完整页面的时长。一般我从下面几个方面着手去做，一般问题都不大。
1、减小资源（静态资源，后端加载的数据）大小（webpack都可以搞定）
- 压缩代码HTML/CSS/JS
- 压缩图片、音视频大小
- Tree-Sharking 消除无用代码
2、避免同一时间的过多次数请求
- CSS 实现雪碧图：使用background-position共享一张图
- 图片懒加载：监听滚动后offsetTop, 使用src 替换 src（真实路径）
- 列表懒加载（分批加载）：监听滚动后offsetTop， 发送请求加载下一页的数据
- 路由懒加载
- 代码分包分块加载（webpack）
- 预加载技术
- 小程序分包、预下载等。
3、缓存（空间换时间）
- CDN 内容分发：获取更近网络节点缓存下来的静态资源
- 浏览器缓存（自带）
- 部分资源保存在LocalStorage或者APP缓存中（手动操作）
4、代码
HTML优化：
- 使用语义化标签
- 减少iframe：iframe是SEO的大忌，iframe有好处也有弊端
- 避免重定向
CSS优化：
- 删除空样式
- 不滥用浮动，字体，需要加载的网络字体根据网站需求再添加
- 选择器性能优化
- 避免使用表达式，避免用id写样式
js优化：
- 压缩
- 减少重复代码
5、其他
- SSR 服务端渲染：解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题