共计 2931 个字符，预计需要花费 8 分钟才能阅读完成。
本文力争为你加入降职问难时，提供一个阐述性能优化相干工作的范式。简略点儿来说，就是依照这个范式文来筹备、论述，就能够赢得降职评委的认可与青睐。
痴迷写页面 UI 的前端千篇一律，懂得量化收益的前端万里挑一。
当初曾经不是刀耕火种的前端原始时代了，可能高保真实现页面 UI 是每一个前端的基本技能，“没有功绩还有苦劳”这句话也不再实用于前端降职了。你辛苦的工作可能会看在直属 leader 的眼里，晓得你为了业务天天熬夜加班，会让你年初绩效更好一些，然而在降职问难中，尤其是高职级同学的降职，根本都是跨部门、或通道评委评审的，他们是不会认为这些重复性劳动、像流水线一样的工作有什么重要价值。
如何让他们在短短工夫内意识到你的工作价值呢，这是你在降职之前要思考的问题！
为啥要选性能优化这一点来做范式呢，因为这个听着高大上，每个前端同学降职时都想提、都会提，然而常常看到很多同学问难时因为这个反而被刷了下来。很多同学想不明确的是，明明我这个工作曾经做了，页面成果也很 OK，leader 和用户都有正向反馈了，但为啥还在这里栽跟头呢？
外围点 – 如何量化本人的工作，量化收益，让工作 看得见 ， 看的明确。
以下会以五个方面来残缺的形容你在性能优化方面所做的辛苦付出，体现出你的成绩价值与思考。
一、需要起源
首先要想明确，有些需要是被安顿的，有些需要是须要主动出击的，这牵扯到一个主观能动性和集体推动协调能力。
就性能优化而言，可能是用户反馈体验卡顿，产品或老板给安顿过去。也能够是你粗疏察看监控数据，意识到性能有晋升空间，而后将问题和解决方案摆到老板背后。
在降职问难时，肯定要把你被动发现问题，提出解决方案，推动 PM 确定为需要，排期、研发上线这个过程论述进去。
谁推动，谁就是这个需要的最大受益者。
二、指标数据与规范锚定
if (没有历史指标数据) {
return false;
// 前面的工作将无任何意义！}如果你在做性能优化之前，没有历史指标数据，那么请你立即进行性能优化工作。调转头来，现将现有相干性能指标数据收集起来。
当一个实验组没有对照组，这个试验也没有了存在的意义。如果你的性能优化工作没有明确的可参考数据，可确定的规范，请你不要做！做了也没有任何收益！因为没有方法体现进去！
选定业务场景
在做页面性能优化时，不要把眼光窄窄的聚焦于首页加载性能优化，更多的能够是依据理论业务场景，抉择一个外围业务页面，影响用户的关键性节点，比方在可视化零碎中看板页面（展现各种数据图表）、电商零碎中的商品搜寻、领取环节、信息推送中的 feed 流等等。
有业务场景，做优化才有意义。
历史指标数据收集：
抉择收集历史指标数据是为了与进行性能优化后的的数据进行比照的，所以咱们肯定要抉择一种权威性的形式来收集这些数据。
-
首推公司外部性能监控平台
公司外部对立的，所有数据指标的定义、收集、口径都是对立的，当一项数据耗时 3s，升高到 2s，所有公司外部的人都是必须得抵赖，这个优化是无效的。
-
自行从 Lighthouse 和 Performance 检测到的性能数据
当咱们从 Lighthouse 或者 Performance 中去收集数据时，可能会因为自身电脑起因，或是样本数据量比拟小，不能造成无效的数据撑持。
-
第三方性能测试网站如 Pingdom、SpeedTracker 等。
因为“墙”的起因，一些国外的网站，咱们在进行测试时，数据不精确，而且自行测试时，样本量数据小。
某些业务数据因敏感性，不能传递到公司内部，这些都是要进行考量的。
所以说，有条件的肯定要使用性能监控平台，次之抉择 Lighthouse/Performance，再次之抉择一些第三方性能测试网站。
性能优化指标：
性能优化指标分为两种：一种是前端常见外围性能指标，一种是业务自定义指标
前端常见外围性能指标：
| 指标名称 | 全称 | 形容 |
|---|---|---|
| FP | First Paint | 浏览器第一次绘制工夫，第一个像素工夫 |
| TTI | Time To Interactive | 页面渲染结束，能够响应用户输出的工夫 |
| FID | First Input Delay | 用户与页面输入框等控件第一次可交互的工夫 |
| LCP | Largest Contentful Paint | 最大内容绘制工夫 |
| FMP | First Meaningful Paint | 首次有意义的绘制，页面次要内容呈现在屏幕的工夫 |
| FCP | First Contentful Paint | 浏览器第一次屏幕绘制内容工夫 |
| CLS | Cumulative Layout Shift | 累计布局版式位移，页面抖动，屏闪 |
自定义指标：依据理论业务须要，自定上报统计的要害业务节点工夫，比方一个图表从数据申请到绘制绘制实现的工夫。
规范锚定：
在现有历史性能指标数据的根底上，遵循行业内优良性能数据体现，或从理论业务登程，确定什么样的耗时是符合标准的，什么是优良的。
这个规范必须要提前确定下来，达成统一。这样在做性能优化时就有了参考点，晓得往哪个指标方向走是正确的。
三、收益预期
性能优化是一件十分考究 ROI（投资回报率）的事件，在这里你肯定要向你的老板 画饼，表白出做这样工作耗时短，收益高，在用户体验这块儿有很大的飞跃。
没有 ROI 的，可做可不做的事件，就肯定不要做。
你不能说给我 2 个月的工夫，我能够把当初页面加载耗时 10s 升高到 1s，先不说你 1s 能不能做到，就单 2 个月这个工夫老板根本就不会批准了。
在这里肯定要产出一个 明确的指标数值，比方咱们要把这个指标从 10s 降到 5s，性能晋升一倍。这个也是为了未来做收益比照的。
这里还有一个套路就是，给出一个激进的目标值，而后做成之后会冲破这个值，对于老板来说也是个惊喜。
舒适提醒：吹牛有危险，装 B 需谨慎！本人心里肯定要有谱，把性能耗时从 2s 升高到 1s，远远要比从 10s 升高到 5s 艰难的多得多。
四、性能优化策略
性能优化的策略有很多种，要依据本人的理论业务需要隔靴搔痒。惯例的一些如懒加载、分包策略、滚动加载、上 Http2、Gzip 压缩等等，这里不是文章的重点，不做过多形容。
在问难时，这块儿据实而说即可。
五、量化收益
重点来了！！！在进行性能优化后，肯定要再次进行指标数据观测、统计，做好收尾工作。没有这一步，后面的工作也是白做了。
辛苦付出，一顿操作，到底数据是不是达到了预期呢？
如果有性能监控平台，这事儿就特地好办，查看下对应的日、周、月维度的数据，察看相应的耗时曲线是否升高。
在问难时，肯定要提供一些图表，至多是表格的数据，将前后收集的关键性指标数据进行比照，凸显所做出的的成果，让评委直观的看到数据的变动，一眼就感触到你所做的性能优化是十分好的。
如果某个 重量级领导 也必定了你的该项问题，记得肯定要在问难时以或直白或婉转的模式想评委们走漏进去，哪加分，不要不要的~
综述
本文的重点在于为你提供一个降职问难时，向评委阐述性能优化的范式，不是具体的性能优化策略施行。
通过五个环节的梳理，展现，评委会在短时间内十分零碎、十分具象的看到你在性能优化方面做出的成绩与价值，也会看到你的技术视线与思考。
如果你是打算在今年年底降职问难，当初曾经能够着手做了，统计历史指标数据，确定优化指标、预期收益，性能优化策略研发上线，量化收益后果。
同时十分欢送大家评论、分享本人的降职经验和教训，为前端小伙伴谋福利。
量化本人的工作，量化收益，让工作 看得见 ， 看的明确。
