本文力求为大家在参与推广答辩时提供一个讨论性能优化相关工作的范式。简单来说，如果按照这个范式来准备和阐述，就能赢得晋级评委的认可和喜爱。痴迷于写页面UI的前端也是一样，懂得量化收益的前端是百万分之一。现在已经不是刀耕火种的原始前端时代了。能够实现高保真的页面UI，是每个前端的基本功。“不讲功劳，不讲功劳”这句话用在前端推广上已经不适用了。你的努力可能在直属领导的眼里是看在眼里的。知道为了业务熬夜加班，年底的业绩会更好。部门，或者渠道评委，他们不会认为这些重复劳动和流水线一样的工作有什么重要的价值。如何让他们在短时间内意识到你工作的价值，这是你晋升前必须思考的问题！为什么选择性能优化作为范式，因为这个听起来很高端，每个前端同学升职的时候都想提，都会提，但是经常看到很多同学因为这个被刷下去防御。很多同学不明白的是，我已经做了这个工作了，页面效果也很好，领导和用户都给予了积极的反馈，但是为什么我还是在这里磕磕绊绊？核心点——如何量化自己的工作，量化收益，让工作看得见、看得懂。以下五个方面将全面描述您在性能优化方面的努力，体现您对结果的价值和思考。1、需求来源首先要明白，有些需求是安排好的，有些需求是需要主动的，这涉及到主观能动性和个人的推动协调能力。至于性能优化，可能是用户反馈体验卡住了，产品或者老板安排的。也可以是你仔细观察监控数据，意识到性能还有提升的空间，然后把问题和解决方案呈现给老板。捍卫推广时，要主动发现问题，提出解决方案，推动PM识别需求，排程，开发上线流程。谁推广，谁就是这种需求的最大受益者。2.指标数据和标准锚定if(无历史指标数据){returnfalse;//后面的工作就没有意义了！}如果您没有性能优化前的历史指标数据，请立即停止性能优化。反过来，现在收集现有的相关性能指标数据。当一个实验组没有对照组时，这个实验就没有存在的意义。如果你的性能优化工作没有明确的参考数据和可确定的标准，请不要做！这样做没有任何好处！因为没有办法表现出来！在针对选定的业务场景优化页面性能时，不要狭隘地关注首页加载性能优化。而是根据实际业务场景选择核心业务页面去影响影响用户的关键节点，比如系统中的可视化看板页面（展示各种数据图表）、电商系统中的商品搜索、支付链接、feed信息推送中的流等。有业务场景，优化是有意义的。历史指标数据采集：采集历史指标数据的目的是为了与性能优化后的数据进行对比，因此我们必须选择权威的方式来采集这些数据。公司内部绩效监控平台率先在公司内部统一。统一所有数据指标的定义、采集、口径。当一条数据耗时3s，降为2s时，公司所有的人都必须承认这个优化是有效的。Lighthouse和Performance的自测性能数据当我们从Lighthouse或Performance收集数据时，可能由于计算机问题或样本数据量较小而无法形成有效的数据支持。第三方性能测试网站，如Pingdom、SpeedTracker等。因为有“墙”，一些国外网站我们测试的时候数据不准确，而我们自己测试的时候，样本量数据小。某些业务数据由于敏感性不能传输到公司外部，这些都是必须要考虑的。所以，有条件的话，一定要使用性能监控平台，其次是Lighthouse/Performance，再选择一些第三方的性能测试网站。性能优化指标：性能优化指标分为两类：一种是前端常用核心性能指标，一种是业务自定义指标像素时间TTITimeToInteractive页面呈现并能响应用户输入的时间FIDFirstInputDelay用户第一次与页面输入框等控件交互的时间LCPLargestContentfulPaint内容绘制的最大时间FCPFirstContentfulPaint浏览器的首屏绘制时间。CLSCumulativeLayoutShift。累积布局布局位移、页面抖动和屏幕闪烁，比如从数据请求到图表绘制完成的时间。标准锚定：基于已有的历史性能指标数据，跟随行业优秀的性能数据，或者从实际业务出发，判断什么样的耗时是符合标准的，什么是优秀的。这个标准必须事先确定并达成一致。这样做性能优化的时候就有了参考点，知道往哪个目标方向走才是正确的。3.利润预期性能优化是ROI（投资回报）??的问题。这里一定要给老板画个图，表示这种工作耗时高，收益高，用户体验高。有一个很大的飞跃。如果没有投资回报率，你一定不能做你能做或不能做的事情。你不能给我2个月，我可以把当前页面加载时间从10s降到1s，别说1s能不能做到，短短2个月老板基本不会答应。这里必须产生一个明确的目标值。比如我们想把这个指标从10秒降到5秒，性能翻倍。这也是为了以后的利润比较。这里还有一个套路，就是给一个保守的目标值，完成之后再突破这个值，也是给boss一个惊喜。温馨提示：吹牛是有风险的，装B一定要小心！你心里一定有谱。将执行时间从2秒减少到1秒比从10秒减少到5秒要困难得多。4、性能优化策略性能优化的策略有很多，要根据自己的实际业务需求对症下药。常规的比如懒加载、分包策略、滚动加载、HTTP2、Gzip压缩等，这里不是本文的重点，就不过多描述了。回应时，如实相告即可。5、量化收益的重点来了！！！在进行性能优化后，还需要再次进行指标数据的观察和统计，以完成收尾工作。没有这一步，前面的工作就白费了。经过一番努力和操作，数据是否达到预期？如果有性能监控平台，这个事情就特别好办。查看对应的日、周、月数据，看对应的耗时曲线是否减少。答辩的时候一定要提供一些图表，至少是表格中的数据，对比前后采集的关键指标数据，突出所做的效果，让评委直观的看到数据的变化，感受你在一个一眼。所做的性能优化非常好。如果某位重量级领导也肯定了你在这门学科上的成绩，记得在答辩时直接或委婉地向评委透露，什么加分，不要了~本文的重点是给你当提供晋升答辩，向评委讨论性能优化的范式，而不是具体性能优化策略的实施。通过五个环节的梳理和展示，评委可以非常系统、具体地看到你在短时间内在性能优化方面取得的成就和价值，以及你的技术眼光和思维。如果你打算在今年年底晋升为国防，现在就可以开始做，收集历史指标数据，确定优化目标，预期收益，制定并推出性能优化策略，量化收益结果。同时也非常欢迎大家评论分享自己的推广心得和体会，造福前端小伙伴。量化你的工作，量化你的收益，让你的工作被看得见、看得懂。
