前端性能优化

1.常见的需要性能优化的场景：

图片、数据量大的情况、播放直播视频的SDK、3D地图引擎等。

2.如何做？

1.开发前会花时间梳理业务，全局视角过一遍交互和视觉，思考组件划分，找出项目中相似的部分，提取为公共组件和通用逻辑。

2.代码开发中尽量保证写出的代码清晰、可维护，比如：清晰的目录和文件结构、添加必要的注释、提取公共函数公共组件、组件单向数据流、组件功能尽量单一等。

3.时刻关注可能会存在性能问题的部分，比如：

路由组件异步加载

动态加载一些初始不需要用到的资源

频繁切换的组件使用KeepAlive进行缓存

缓存复杂或常用的计算结果

对实时性不高的接口进行缓存

同一个接口多次请求时取消上一次没有完成的请求

页面中存在很多接口时进行优先级排序，优先请求页面重要信息的接口，并关注同一时刻请求的接口数量，如果过多进行分批请求

对于一些确实比较慢的接口使用loading或骨架屏

懒加载列表，懒加载图片，对移出可视区的图片和dom进行销毁

关注页面中使用到的图片大小，推动后端进行图片压缩

地图撒点时使用聚合减少地图引擎渲染压力

对于一些频繁的操作使用防抖或节流

使用三方库或组件库尽量采用按需加载，减少打包体积

组件卸载时取消事件的监听、取消组件中的定时器、销毁一些三方库的实例

3.常用方法：

• 性能问题排查：

1.数据埋点上报

2.使用控制台的NetWork、Performance等工具

3.webpack-bundle-analyzer插件分析打包产物

• http相关：

1.gzip压缩

2.强缓存、协商缓存

• 图片相关：

1.图片压缩

2.图片懒加载

3.雪碧图、使用字体图标、svg

• webpack相关：

1.优化文件搜索

2.多进程打包

3.分包

4.代码压缩

5.使用CDN

• 框架相关：

1.vue性能优化、react性能优化

2.异步组件

3.tree shaking

4.服务端渲染

• 代码实现

1.按需加载，逻辑后移，优先保证首屏内容渲染

2.复杂计算使用web worker

3.接口缓存、计算结果缓存

4.预加载

5.骨架屏

6.虚拟滚动

参考链接：https://juejin.cn/post/7239267216805838903
揭秘 Vue.js 九个性能优化技巧