前端性能优化介绍

什么是Web性能

简单来说就是网站够不够快

  • 打开速度
  • 动画效果
  • 表单提交
  • 列表滚动
  • 页面切换

MDN上的Web性能的定义: Web性能是网站或应用程序的客观度量和可感知的用户体验。

  • 减少整体加载时间：减小文件体积，减少HTTP请求，使用预加载
  • 使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载
  • 平滑和交互性：使用CSS代替JS东海，减少UI重绘
  • 感知表现：你的页面可能不能做的更快，但是你可以让用户感觉更快。耗时操作要给用户反馈，比如加载动画，进度条，骨架屏等信息
  • 性能测定：性能指标，性能测试，性能监控持续优化

为什么要关注Web性能

  • 用户的留存
  • 网站的转化率
  • 体验与传播
  • 搜索排名
  • 客户投诉
  • 提升工作绩效

如何进行Web性能优化

  1. 首先要了解性能指标——多快才算快
  2. 使用专业的工具可量化地评估出网站或应用的性能表现
  3. 立足于网站页面响应的生命周期，分析出造成较差性能表现的原因
  4. 最后进行技术改造，可行性分析等具体的优化实施
  5. 迭代优化

性能指标

性能测量

  • 浏览器DevTools调试工具

    • 网络监控分析
    • 性能监控分析

  • 灯塔(LightHoust)

    • 网站整体质量评估，并给出优化建议

  • WebPageTest

    • 多测试地点
    • 全面的性能报告

生命周期

优化方案

  • 从发出请求到收到响应的优化，比如DNS查询，HTTP长连接，HTTP2，HTTP缓存。
  • 关键渲染路径优化，比如是否存在不必要
  • 加载过程的优化，比如延迟加载，是否有不需要在首屏展示的非关键信息，占用了页面加载的时间。
  • 资源优化，比如图片，视频等不同的格式类型会有不同的使用场景，在使用过程中是否恰当。
  • 构建优化，比如压缩合并，基于webpack构架优化方案。

RAIL性能模型

RAIL 是 Response, Animation, Idle 和 Load的首字母缩写，是一种由 Google Chrome 团队于2015年提出的性能模型，用于提升浏览器内的用户体验和性能。

RAIL 模型的理念是“以用户为中心，最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意”。

  • 响应（Response）：应该尽可能快的响应用户，应该在100ms以内响应用户输入。
  • 动画（Animation）：在展示动画的时候，每一帧应该以16ms进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
  • 空闲（Idle）：当使用JavaScript主线程的时候，应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户交互。
  • 加载（Load）：应该在小于1s的时间内加载完成你的网站，并可以进行用户交互。

响应

比如用户进行了文本输入，按钮点击，表单切换及启动动画等操作后，必须在100ms内收到反馈，如果超过100ms的时间窗口，用户就会感知到延迟。

看似很基本的用户操作背后，可能会隐藏着复杂的业务逻辑处理及网络请求与数据计算。对此我们应当谨慎，将较大开销的工作放在后台异步执行，而即便后台处理要数百毫秒才能完成的操作，也应当给用户提供及时的阶段性反馈。

比如在单击按钮后向后台发起某项业务处理请求时，首先反馈给用户开始处理的提示，然后再处理完成的回调后反馈完成的提示。

动画

每一帧应该以16ms左右进行刷新。一帧图像生成预算为16ms，除去浏览器绘制新帧的时间，留给执行代码的时间仅10ms左右。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。

空闲

当使用JavaScript主线程的时候，应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户交互。

加载

首次加载应该在5s之内完成，并可以进行用户交互，对于后续加载，应该在2s内完成。

基于用户体验的性能指标

First Contentful Paint（FCP）

FCP（First Contentful Paint）首次内容绘制，浏览器首次绘制来自DOM的内容的时间，内容必须是文本，图片（包含背景图），非白色的canvas或SVG，也包括带有正在加载中的Web字体的文本。

这是用户第一次开始看到页面的内容，但仅仅是有内容，并不意味着它是有用的内容。（例如Header，导航栏等），也不意味着有用户要消费的内容。

速度指标

FCP时间（秒） 颜色编码 FCP分数（HTTP存档百分位数）
0-2 绿色（快速） 75-100
2-4 橙色（中等） 50-74
超过4 红色（慢） 0-49

Largest Contentful Paint（LCP）

LCP（Largest Contentful Paint）最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间。

LCP考虑的元素：

  • <img/>元素
  • <image>元素内的<svg>元素
  • <video>元素（封面图）
  • 通过url()函数加载背景图片的元素
  • 包含文本节点或其他内联级文本元素子级的块级元素。