性能优化，这个老生常谈的话题，谁面试的时候不得洋洋洒洒的说上个很多点。
但在实际运用中一开始却无从下手。网站卡顿，崩溃，怎么从表象中发现问题，解决问题，验证问题呢？
记录一下行之有效的性能优化方法。
1.选择测量工具
谷歌浏览器的任务管理器，开发者工具中的"性能"，"内存"面板，最好有一台配置不高的设备。
2. 确认问题
- 打开网站，查看任务管理器中的内存占用空间，如果超过1G，很明显内存占用太大，很难不卡。理想的内存占用空间不要超过300M。当然这个数据是动态的，和交互操作有关，可以大概判断性能是否存在问题。
比如这种，高达3G,SOS!
- 打开性能面板，点击录制，看看表现，时间可以适当延长，20s-60s。
同样很不对劲，黄色警告色块过大，主要体现在js执行耗时太多，也可以观察中间的几条线，如果一直增长没有回落，一定存在内存泄漏问题。
- 打开内存面板，分时多次录制，检测是否存在内存泄漏
这一项还好，没有内存泄漏。由此可见，性能问题不一定都是内存泄漏。
以上是确认是否存在性能问题的方法。
分析定位问题
对于如何分析定位问题，我主要是在性能面板的耗时汇总里定位到主要问题点的，前端项目都是经过打包的，我的体验是很难定位到问题，仔细分析吧，看看有没有眼熟的文件或者函数。
解决问题
首先要解决的是确实造成很大影响的一个滚动插件，引起的dom频繁重绘，替换掉之后，网站运行时的内存占用空间直接减少了一半以上。趁这个机会，同时做了其他项目也适用的优化，主要是以下几点：
- 压缩图片资源，并转为webp格式，大幅度减少图片资源体积
没有找到能够打包时自动转换的方法，用sharp手动批量转换的，也不算麻烦。
- 对引起页面渲染的方法添加防抖，避免短时间内多次执行，dom操作一定要尽可能的少。
- 将固定的大体积json文件缓存至localStorage，避免重复接口请求，提升用户交互速度
优化成果
- 运行时的稳定内存占用量从1.3G降至550M
- 高频操作时内存占用量从3G降至1.2G
- 运行时性能js执行大幅度降低，空闲时间提高
- 页面表现良好，解决了卡顿问题
