前端性能优化

资源加载优化

1. 使用CDN缓存
2. 能压缩就压缩
3. 看看用的三方包能否按需加载
4. 图片可以换成 webp 格式，使用懒加载和骨架屏占位等
5. 使用 webpack 的 splitChunks 进行代码分割，可以单独打包，为打出的包添加缓存策略，利用浏览器缓存
6. 使用 <link rel="preload"> 预加载关键资源
7. 使用 Tree Shaking 树摇功能，将无用的代码删除

网络请求优化

1. 尽量减少 HTTP 请求数量，减少网络开销
2. 合理设置缓存策略 (强缓存：Cache-Control, Expires,协商缓存:ETag、Last-Modified，本地储存)
3. 启用 HTTP/2 多路复用特性
4. 通过 UCP 优化网络传输
5. DNS 预解析

业务优化

1.长列表滚动时会加载大量图片，性能开销大，在快速滚动过程中，只加载尺寸较小的模糊图，等到滚动停止后再渐进式的展示原图，并且在超出屏幕区域不加载原图，优化体验

2.数据透传，进入详情页时带入并展示基础数据视图

3.滚动列表可添加虚拟渲染