1如上所述，我们开发一个网站或APP后，最担心的就是用户访问时出现页面卡顿、白屏等性能问题，这严重影响用户体验。现在大公司都会在性能提升和优化上下功夫，会制定前端性能标准，开发预警监控平台。那么前端性能优化一般都是琐碎复杂的。我们应该如何将琐碎的工作系统化？2性能优化流程在进行性能优化处理之前，首先要了解性能优化的相关流程，以便严格按照流程进行处理。能。同时，明确优化实践流程，是为了保证信任也能按照它来实施。这是优化结果长期维护的重要保障，也是我们后期维护的动力。绩效优化流程包括：指标设置、绩效标准、效益评价、诊断清单、优化手段、绩效项目立项、绩效实践、指标设置、绩效标准：选择什么指标作为风向标？设置好指标后，就是确定性能标准，也就是我们的性能优化目标是什么？性能优化到什么程度合适？收益评估：我们在做这些性能优化的时候，其实需要把产品目标联系起来进行收益评估。如果做这些改变没有任何好处，我们就没有意义了。性能优化的目的是为产品服务，提升用户体验，而不是重复无意义的造轮子。诊断清单：其实在我们的生产过程中，有很多性能问题是不能立即监控的。为此，我们需要将我们编写的业务代码接入性能监控预警平台，并根据性能标准给出诊断清单，方便我们进行后续的改进和优化。优化方法：在监控预警平台给出我们代码的诊断列表后，我们需要结合性能标准，确定性能标准对应的优化方法。性能项目审批：我们发起一个性能项目的时候，需要产品和后端同学的支持，也是我们性能优化过程中不可或缺的一部分。性能实践：性能优化后的项目需要重新启动并跟踪进行效果评估。结合场景，将这些项目成果以文档或者代码的形式沉淀下来，方便我们后续的学习和经验总结。3性能指标采集和上报前面提到了性能优化的基本流程，其中重要环境需要依赖监控预警平台，这就需要性能采集和上报的可视化。那么我们现在需要将上述的性能指标以代码的形式实现，分解实现，保证发现的性能问题能够被收集，然后打包SDK进行统计和埋点。最后，根据实际情况，指定报告策略。具体为：指标分解指标采集SDK封装统计埋点上报策略数据预处理性能监测预警平台主要分为性能数据处理后台、性能可视化展示前台和性能数据存储三个部分。性能数据处理后台：性能采集数据上报性能平台后，进行数据预处理、数据清算、计算，生成前端可视化需要的数据。业绩可视化展示前台：主要是对核心数据指标进行可视化展示，监控业绩数据波动。当指标超过一定的监测阈值时，性能监测预警平台将通过邮件、短信或其他通知形式向我们发送预警信息。性能数据存储：这部分主要是采集和上报的性能数据存储，方便后续的数据分析和数据可视化处理。4性能监控预警平台我们项目开发完成后，在上线前必须做专门的性能测试，检查你采取的措施是否符合性能优化预期。在整个性能优化体系中，你认为应该首先做哪一个？比如你们公司开发的APP活动页，在加载数据时出现了性能问题，我们应该如何优化？当然，首先要确定它的性能指标，它的标准是什么？只有设定了绩效指标，知道了它的标准，才能知道如何围绕它优化绩效。那么什么样的指标值得我们关注呢？当然，围绕用户服务和优化体验，是可衡量的数据。可衡量的意思是可以通过代码来衡量，注重以用户为中心的关键结果和真实体验。的。关键结果：我们知道我们需要关注用户关心的信息，那么用户到底关心什么？当用户进入商品详情页时，当然关心的是商品怎么样。具体页面是产品描述、产品标题图片、产品价格、产品销量、如何购买按钮等关键信息。真实体验：真实体验当然是使用产品的感觉。例如，当用户进入列表页面时，在滑动过程中页面加载过程中突然弹出一个弹窗。他会觉得烦吗？例如，我们将在年底在所有主要平台上发布年度报告。所以如果用户滑动切换页面，视频、动画、音乐的播放不是那么流畅，这会大大降低产品的预期效果。5性能优化关键指标的设置和标准在性能优化的关键指标方面，目前业界主要关注加载，尤其是页面白屏时间和首屏时间。埋点除人工采集上报外，还可以实现自动采集上报。但是，交互性和视觉稳定性的关键指标，目前业界还在探索中，尚未达成统一的衡量标准。因此，目前需要人工采集。加载：是页面从白页加载到进入页面显示的加载过程。当你打开一个网站页面时，你会发现有的网站首页的文字和图片显示的很慢，有的却加载很快。这个内容出现的过程就是加载过程。视觉稳定性指标：CLS（CumulativeLayoutShift）即布局偏移量，指的是页面从一帧切换到另一帧时，视线中不稳定元素的偏移量。目前的视觉稳定性指数CLS是比较前沿的。它的获取方式没有比依赖谷歌的Lighthouse进行本地获取更好的解决方案了。举个例子：当你要点击页面上的购买链接时，突然在原来的位置插入了一个9.9免运费的广告，然后用户点击进入产品广告页面，你不觉得尴尬吗？交互指标：FID指标（FirstInputDelay，首次输入延迟）指标尽量小于100ms，PSI（PerceptualSpeedIndex，视觉变化率）测量标准小于20%。白屏时间：指的是从输入内容开始（包括刷新、跳转等）到页面出现第一个字符的时间。标准时间为300ms。首屏时间：首屏时间的计算方式为“首屏时间=白屏时间+渲染时间”。第一个屏幕加载是讨论最多的话题。一方面，前端web前端屏幕的加载性能普遍较差。另一方面，首屏的加载速度非常重要。很多时候，长长的白屏会让用户没有体验。说到网站功能就会有所流失，首屏速度是用户留存的关键点。从重要性来看，用户打开页面后第一眼看到的内容非常重要，比如电商页面的头部图片、商品价格、购买按钮等，这些内容用户甚至必须看到在最恶劣的网络环境中。从体验完整性的角度来说，进入页面后，先是白屏，当第一个字符加载到首屏内容显示结束时，我们就认为加载完成，用户可以用它。首屏时间的标准最初是根据页面对时间的敏感度来判断的。主要是根据用户平均首屏加载时间计算，并没有详细区分2G/3G/4G/wifi等网络环境。注意：最佳：白屏<1s，首屏<1.5s，onload<3s首屏时间在1s以内，用户会感觉加载速度快，超过2.5s会感觉很慢。1秒以内打开页面，人对这么短的时间不是很敏感，感觉不到10ms和50ms的区别。当2G/3G网络环境较弱或网络不稳定时，用户连接互联网的加载时间会变得很长，严重影响整体指标。对此，有人开始用中位数坐拥正态分布，看分位数统计。P50（50thpercentilevalue），P90（90thpercentilevalue），P99（99thpercentilevalue），以P99为例，就是对所有的首屏时间进行排序，得到第99个首屏时间作为指标，即为P99。后来引入了一个指标：二次打开率，即1s内打开的用户比例。毕竟首屏时间的粒度比较粗。如果首屏时间过长和黑屏时间段，那么问题出在哪里？首屏时间：可分为白屏时间、数据接口响应时间、图片加载资源时间等白屏时间：数据接口响应时间直接从后端Cebu获取，无需前端重复计算。6参考文末写的《前端性能优化方法与实践》7。读者对性能优化系统有了更好的了解，了解了相关的指标和指标，因为学习性能优化不仅仅是掌握一些优化技术，更重要的是为什么要去做？
