每日一诗

《青玉案·元夕》
东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。

web性能是什么

简单来说就是你的网站够不够快,举以下几个例子

表单提交
列表切换
动画的流程性
打开速度

MDN上对web性能的定义是-Web 性能是网站或应用程序的客观度量和可感知的用户体验。可以从以下几个点出发

加载速度
交互和平滑性
感知表现

性能优化流程

确定标准。做性能优化必须确定标准，如果没有确定标准，我们就无法知道做到什么程度才是合适的，有可能你自我认为性能已经做的很好了，但是从用户角度来看的实际体验却很糟糕,这就是没有达到目的。

如果做的过度其实就是人力和收益不成正比，例如加载时间，已经是达到一个极致了，你还要继续优化，例如缩减1ms，但是实际上收益不大，那么此时我们就应该转换战线。

利用专业的测试工具去客观的、量化的评估网站的性能。这些工具可以帮我们准确的去评估，获得更多对我们有用的数据。而如果单单通过肉眼去观察的话，那么实际上获取的数据就是很少的。

例如网站加载慢，你所认为的慢其实就是等待时间长，但是除了这个，你没有获得更多的一些对你有用的数据。
而且对于不同人来说，有些人觉得慢，有些人觉得还行，那这时候你就要展示你获得的数据去证实你的观点，用数据说话。

基于网站页面的生命周期，去分析造成性能差的客观原因，而不是说主观的自我感觉，得拿出数据。
基于上一步定位到的原因，去找到收益最高的技术方案进行改造
持续改造，很多东西不是一蹴而就的，不是说一天你就能把这个给优化的很好，这是一个渐进式的一个过程。特别是对于一些巨石项目。

性能优化指标

这里会介绍几个主要的性能指标

RAIL 性能模型

RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由 Google Chrome 团队与 2015 年提出的性能模型，用于提升浏览器内的用户体验和性能. RAIL 模型的理念是 "以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。

response 反馈时间应该在100ms内，例如点击一个按钮，那么网站要在100ms内给予用户反馈
Animation 其实就是动画流畅性，浏览器的刷新频率和设备的一样，都是60HZ，也就是16.6ms绘制一帧，从而保证动画不卡顿，如果超过这个时间，那么动画就会造成卡顿。
idle 也就是线程空闲时间，当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互。如果超过50ms我们就称之为long task。
load 应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互

基于用户体验的性能指标

基于用户体验的性能指标是 Google Chrome 团队与 2019年提出的。简单来说其实就是精确指标。例如：我们说网站加载慢，那么用应该用哪些指标去衡量它慢。 web.dev/i18n/zh/use…

first contentFull paint(首次内容绘制)：其实就是浏览器首次绘制来自dom的内容的时间
largest contentFull paint(最大、最主要内容绘制):最大指的不是盒子大，而是指的资源占用大，最主要其实就是页面最主要的内容，用这个指标可以衡量我们页面主要内容对用户可见的时间
first input delay(首次输入延迟)：其实更应该说是首次交互延迟，其实就是首次交互到程序响应的时间，因为html从上往下进行解析，有可能dom绘制完了，但是js还在执行很大的任务。那么当我们交互的时候就是没有反馈的。因为js是单线程的，线程正在执行大任务。
time to interactive(完全可交互时间)：指的是页面渲染完毕，脚本执行完毕，可以快速响应用户行为的时间
total block time(总阻塞时间)：测量FCP到TTI之间的总时间。
任务阻塞时间 = (long task 执行时间) - 50ms 总阻塞时间 = 任务1阻塞时间 + 任务2阻塞时间+...
Cumulative layout shift (累积布局偏移):测量页面在开始加载和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。举个例子：一个banner在刚开始渲染的时候是在距离顶部100px，但是当js执行后，banner可能距离顶部200px，这就是布局偏移。
speed index (页面填充速度):页面可能从上往下填充，也可能从左往右填充。这个其实就是用来衡量页面填充的。

core web vitals

Core Web Vitals 是了解网站整体用户体验的关键指标，可以说是第二种性能指标的简略版。分为三部分

加载性能 - FCP衡量
交互性 - FID衡量
视觉稳定性 - CLS衡量

关于标准

以上指标的数值标准，可以直接developer.chrome.com/ 上看

测量工具

这里简述一下主要的测量工具

webPageTest：免费并且专业 www.webpagetest.org/ 功能强大，可以设置不同浏览器、不同地区等等。十分推荐。例如你是负责海外某平台的，集群在海外机房，那么你测试的时候应该把地区调到海外，如果你在国内地区测，那么评估就会有些差异。
chrome devtools：浏览器任务进程管理、performance看板、memory看板等等。
lightHouse：可以评估网站分数，还会得出指标评分以及建议。

写在最后

写在黄昏，日下山头。对这几天学习的一个总结，有些你认为无意义的东西，只是还没有用到的场景，当场景出现的时候，你如果有相应的知识储备，到那时候就可以亮相一把。虽然有可能你会永远用不到。但是谁说的准呢。

web性能优化指标