什么是 web 性能
通俗来说就是网站够不够快。如以下几个方面：
- 打开速度
- 动画效果
- 表单提交
- 列表滚动
- 页面切换
- ...
MDN对Web性能的定义:Web 性能是对网站或应用程序的客观度量和用户的体验。包括以下主要方面：
- 减少总体负载时间：需要多长时间才能将渲染网站所需的文件下载到用户的计算机上？这往往受到延迟 (en-US)、文件大小、文件数量以及其他因素的影响。一般策略是使文件尽可能小，尽可能减少 HTTP 请求的次数，并采用巧妙的加载技术（例如 preload）使文件更快可用。
- 尽快使网站可用：简单来说就是以合理的顺序加载你的网站资源，以便用户能够更快地开始使用。在用户继续执行主要任务的同时，任何其他资源都可以在后台继续加载。有时我们也会在实际需要时才加载资源（这被称为懒加载）。网站从开始加载，到达到可用状态为止所需的时间被称为交互等待时间 (en-US)。
- 流畅性和交互性：应用程序是否可靠，使用起来是否愉快？滚动是否流畅？按钮是否可点击？弹出窗口是否能够快速打开，并且在打开时动画是否流畅？在制作流畅的应用程序时，有很多优秀实践可以参考。例如使用 CSS 动画而不是 JavaScript 来制作动画，并尽量减少由于 DOM 变化而引起重绘 UI 的次数。
- 感知性能：用户所体验到的，是网站看起来有多快，而不是网站实际有多快。用户感受到的性能与任何客观统计数据一样重要，甚至可能更重要。但这种主观的感受不容易测量。感知性能是用户的感受，而不是度量标准。即使操作将花费很长时间（因为延迟或其他原因），也可以通过显示“加载中”的旋转指示器或一系列有用的提示和技巧（或笑话，以及其他你认为合适的内容）来保持用户在等待期间的参与度。这种方法比什么都不显示要好得多。因为什么都不显示会让用户觉得等待了更长的时间，可能会让你的用户认为网站坏了，然后放弃使用。
- 性能测量：Web 性能包括测量应用程序的实际速度和感知速度，在可能的情况下进行优化，然后监视性能，以确保已经优化过的内容保持优化状态。这涉及到许多度量标准（可以指示成功或失败的可度量指标）和测量这些度量标准的工具，我们将在本节中讨论这些度量标准。
性能的重要性
Web 性能关乎网站的快速加载，以及让缓慢过程看起来更快。
Web 性能是指网站内容在网页浏览器中的加载和渲染速度，以及对用户交互的响应。性能不佳的网站显示和响应输入速度缓慢。性能不佳的网站会增加用户放弃访问的概率。在最糟糕的情况下，性能不佳会导致内容完全无法访问。一个很好的 web 性能目标是让用户注意不到性能。
低性能的影响：
- 用户的留存
- 网站的转化率
- 体验与传播
- 用户投诉
- ...
如何开展性能优化
可衡量性能指标方式
测量性能
如果把对网站的性能优化比作一场旅行，他无疑会是漫长且可能还略带泥泞的， 在开始之前有必要对网站进行性能测量，以知道优化的方向在何处。 可借助一些工具来完成性能测量：
- 浏览器的开发者调试工具
- 网络监控分析
- 性能监控分析
- 灯塔（Lighthouse）
- 可对网站进行整体质量评估，并给出优化建议。
生命周期
网站页面的生命周期通俗地讲，就是从我们在浏览器的地址栏中输入一个URL后， 到整个页面渲染出来的过程，整个过程包括域名解析，建立TCP连接，前后端通过HTTP进行会话，压缩于解压缩， 以及前端的关键渲染路径等，把这些阶段拆解开来看， 不仅能容易地获得优化性能的启发，也能为今后的工程师之路构建出完整的知识框架，网站页面加载的生命周期如下图所示。
优化方案
经过对网站页面性能的测量及渲染过程的了解，对于做高性能体验的原因已经比较清楚了，那么接下来便是优化性能，在这里简单介绍一些优化方面的思路。
- 从发出请求到收到相应的优化， 比如DNS查询、HTTP长连接、HTTP2、HTTP压缩、HTTP缓存等。
- 关键渲染路径优化， 比如是否存在不必要的重绘和回流。
- 加载过程的优化， 比如延迟加载，是否有不需要在锁屏展示的非关键信息，占用了页面加载的时间。
- 资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当。
- 构建优化，比如压缩合并，基于打包工具构建优化方案等。
- ...
