对于web性能优化我有话说！

web性能是什么呢？

简单来说就是咱们的项目打开的快不快，举以下几个例子

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

 

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

 

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

 

性能优化流程

 

• 确定优化指标：做性能优化必须确定标准，如果没有确定标准，我们就无法知道做到什么程度才是合适的，有可能你自我认为性能已经做的很好了，但是从用户角度来看的实际体验却很糟糕,这就是没有达到目的。
  如果做的过度其实就是人力和收益不成正比，例如加载时间，已经是达到一个极致了，你还要继续优化，例如缩减1ms，但是实际上收益不大，那么此时我们就应该转换战线

• 利用专业的测试工具去客观的、量化的评估网站的性能：这些工具可以帮我们准确的去评估，获得更多对我们有用的数据。而如果单单通过肉眼去观察的话，那么实际上获取的数据就是很少的
  例如网站加载慢，你所认为的慢其实就是等待时间长，那如果是等待时间长，那我们是不是可以考虑加点动画，让等待时间看起来并不是那么的长，但是除了这个，你没有获得更多的一些对你有用的数据呢
  而且对于不同人来说，有些人觉得慢，有些人觉得还行，那这时候你就要展示你获得的数据去证实你的观点，用数据说话往往是最有力的

• 基于网站页面的生命周期，去分析造成性能差的客观原因，而不是说主观的自我感觉，还是一句话拿数据说话

• 基于上一步定位到的原因，去找到收益最高的技术方案进行改造（这一步的话主要看自身项目的业务场景和需求了）

• 持续改进：很多东西不是一蹴而就的，不是说一天你就能把这个给优化的很好，毕竟我们程序猿也是人嘛，考虑的方面也会有些许欠缺，这是一个渐进式的一个过程，特别是对于一些巨石项目

性能优化指标

RAIL 性能模型：

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

基于用户体验的性能指标：

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

测量工具

下面推荐几款非常好用测量工具，用起来！

• webPageTest： 免费并且专业 https://www.webpagetest.org/ 功能强大，可以设置不同浏览器、不同地区等等。十分推荐

• chrome devtools：浏览器任务进程管理、performance看板、memory看板等等

• lightHouse：可以评估网站分数，还会得出指标评分以及建议