前语
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中，落实到人。
- 我会担任要害节点的查看和跟进。
- 每周一我会进行项目的总结，包含项目发展、本周重点作业、风险等。
- 我会利用日报、周报、周会的时机共享项目的难点，无关人员的发问往往让我发现更多问题。
- 每次上线我会记载方针变化，不符合预期的调整计划。
- 项目完成后我会输出效果/复盘陈述。
结语
这是我对怎么做功能优化的一些认知，期望与大家讨论。
