前言
2023年一月经历了裁员，恰好赶上我的宝宝出生，找工作的事情一拖就是三个月。最近开始陆陆续续的面试，感受到了寒意。为了对抗焦虑，我开始总结自己的过往经历，梳理知识体系。我相信一切都有最好的安排。
大部分谈性能优化的文章都是罗列一些优化的方法，看起来都对，但是太多了根本记不住。所以我想试着从“道”的层面谈谈看法。
三步走
- 第一步：看清问题
- 第二步：确定方案
- 第三步：过程管理
第一步：看清问题
性能优化不可能脱离场景，避免为了优化而优化。
可以尝试KT决策法帮助分析：
- 现状是什么？期望的结果是什么？（状况分析）
- 我觉着是什么原因？谁来做？什么时间做？把边界确定清楚。（问题分析）
- 目标是什么？尽量遵循SMART原则（决策分析）
第二步：确定方案
也可以三步走：
- 第一步是了解整个页面生命周期中的关键路径（约等于常见的面试题：从输入url到页面渲染都经历了什么？）。
- 第二步是通过经验或者一些工具来找到具体的问题点。
- 第三步是确定具体方案.这里尽量避免闭门造车，多跟有经验的人沟通。避免思维被局限到某些具体的事情而做大量微优化。
1. 关键路径
这里需要我们有较多的知识储备，临时抱佛脚没用。
以web端为例，涉及到：浏览器架构、DNS、CDN、网络传输/安全、网关、ssr、后台接口等等，都是需要积累的知识。
单看浏览器架构可以参考这篇笔记。
2. 诊断工具
有两类工具可以使用：
线上诊断:
大型互联网公司一般都有线上监控系统，可以统计页面LCP、FID等核心指标。小公司可以使用sentry等开源工具或者基于web-vitals库自建。
我们一般会以这些线上指标作为检验效果的依据。
线下诊断:
一般会使用Chrome控制台帮助我们定位问题，其中：
- lighthouse面板可以页面进行整体打分，并提供优化建议。
- performance面板可以通过录制页面提供详细的信息：包括页面截图、FCP等关键指标、线程调用堆栈、CPU开销和网络请求时间，我们应该重点关注标红的色块。小技巧：它可以模拟弱网和CPU降速。
- 渲染面板可以帮助定位异常的回流和重绘。
- 其他还有一些：查看网络抓包（NetWork面板）、JS代码执行覆盖率（Coverage面板）、内存快照（Memory面板）、查看页面分层（图层面板）。
3.优化的手段
之前写过性能优化笔记可以参考，但具体的手段远不止这些。实际项目中还是得根据前面的分析得出有针对性的优化手段。
第三步：做好过程管理
参考：计划 -> 行动 -> 检查 -> 纠正 -> 总结
以一个真实的项目为例聊聊
第一步看清问题：
- 首先我们的业务有个诉求，希望我们官网的性能优于竞品。
- 然后我对我们的网站和竟品网站做了初步调研，输出了调研报告。
- 基于调研报告，最终确定优化的目标是：******（这个目标得到项目负责人的认可）。
第二步确定方案：
- 结合一些工具和数据，我想出了很多优化的方案（关注投入产出比），形成报告。
- 我把这个报告让尽可能多的人知道（我们组有写日报的习惯，日报是一个很好的推广渠道）。
- 我会尽可能找更多的有经验的人去探讨（这里是带着我的想法和结论的，避免浪费别人的时间）。
- 最终形成确定方案（这个方案要得到技术Leader或项目负责人的认可）。
- 我的方案包含：分包优化、媒体资源优化、ssr层优化。
第三步过程管理：
- 我会维护一个在线excel和一个交流群来管理项目，给相关人开权限。
- 我会把工作拆解成可执行最小粒度放在excel中，落实到人。
- 我会负责关键节点的检查和跟进。
- 每周一我会进行项目的总结，包括项目进展、本周重点工作、风险等。
- 我会利用日报、周报、周会的机会分享项目的难点，无关人员的提问往往让我发现更多问题。
- 每次上线我会记录指标变化，不符合预期的调整方案。
- 项目完成后我会输出成果/复盘报告。
结语
这是我对怎么做性能优化的一些认知，期望与大家探讨。
