什么是 Web 性能？
网页性能主要关注如何使网站加载速度更快，包括让缓慢的过程看起来很快。网站加载是否快速？用户是否可以快速开始与之交互？如果某些内容加载需要时间（例如加载旋转器），是否会提供令人放心的反馈？滚动和动画是否流畅？本文简要介绍了客观、可衡量的网页性能*，探讨了网页优化中涉及的技术、技巧和工具。
* 相对于主观、感知性能，将在下一篇文章中介绍
什么是 Web 性能？
网页性能是指网站或应用程序的客观衡量和用户感知体验。这包括以下主要方面
- 减少整体加载时间：渲染网站所需的文件下载到用户计算机上需要多长时间？这往往受延迟、文件大小、文件数量以及其他因素的影响。一个通用的策略是尽可能减小文件大小，尽可能减少 HTTP 请求数量，并使用巧妙的加载技术（例如预加载）使文件更快地可用。
- 尽快使网站可用：这基本上意味着以合理的顺序加载网站资源，以便用户能够非常快速地开始实际使用它。其他任何资源都可以在后台继续加载，而用户则可以执行主要任务，有时我们只在真正需要时加载资源（这称为延迟加载）。网站从开始加载到可用启动所花费的时间被称为交互时间。
- 流畅性和交互性：应用程序使用起来是否可靠且令人愉悦？滚动是否流畅？按钮是否可点击？弹出窗口是否快速打开，以及在打开时动画是否流畅？在使应用程序感觉流畅方面，有很多最佳实践需要考虑，例如使用 CSS 动画而不是 JavaScript 进行动画，以及最大程度地减少由于 DOM 更改而导致的 UI 重绘次数。
- 感知性能：网站在用户眼中加载速度快慢，对用户体验的影响大于网站的实际加载速度。用户如何感知您的性能与任何客观统计数据一样重要，甚至可能更重要，但它是主观的，而且不容易衡量。感知性能是用户视角，而不是指标。即使某个操作需要很长时间（由于延迟或其他原因），也可以通过显示加载旋转器或一系列有用的提示和技巧（或笑话，或您认为合适的任何其他内容）来保持用户的参与度，让他们在等待时不感到无聊。这种方法远比什么都不显示要好，因为什么都不显示会让人感觉加载时间长得多，并可能导致用户认为网站已损坏而放弃。
- 性能测量：网页性能包括测量应用程序的实际和感知速度，在可能的情况下进行优化，然后监控性能，以确保您优化的内容保持优化状态。这涉及许多指标（可以指示成功或失败的可衡量指标）和用于衡量这些指标的工具，我们将在本模块中进行讨论。
总而言之，许多功能会影响性能，包括延迟、应用程序大小、DOM 节点数、发出的资源请求数、JavaScript 性能、CPU 负载等等。重要的是要最小化加载和响应时间，并添加其他功能来隐藏延迟，使体验尽可能快地可用和交互，同时异步加载体验的较长尾部分。
注意：网页性能既包括加载时间、每秒帧数和交互时间等客观测量，也包括用户对内容加载时间的感知体验。
内容是如何呈现的
为了有效地理解网页性能、其背后的问题以及我们上面提到的主要主题领域，您确实应该了解一些有关浏览器工作原理的具体内容。这包括
- 浏览器的工作原理。当您请求一个 URL 并按下Enter / Return 时，浏览器会找出保存该网站文件的服务器在哪里，建立与该服务器的连接，并请求这些文件。请参阅填充页面：浏览器的工作原理，以获取详细概述。
- 源代码顺序。HTML 索引文件的源代码顺序会显著影响性能。从索引文件中链接到的其他资源的下载通常是顺序进行的，基于源代码顺序，但这可以进行操作，并且绝对应该进行优化，意识到某些资源会阻止其他下载，直到其内容被解析并执行。
- 关键渲染路径。这是浏览器在从服务器下载文件后构建网页文档的过程。浏览器遵循一组明确定义的步骤，优化关键渲染路径以优先显示与当前用户操作相关的內容，将显著缩短内容渲染时间。请参阅关键渲染路径，以获取更多信息。
- 文档对象模型。文档对象模型或 DOM 是一个树形结构，它将 HTML 的内容和元素表示为节点树。这包括所有 HTML 属性以及节点之间的关系。页面加载后进行大量的 DOM 操作（例如，添加、删除或移动节点）可能会影响性能，因此了解 DOM 的工作原理以及如何缓解此类问题非常有价值。请访问文档对象模型，了解更多信息。
- 延迟。我们之前简要提到了这一点，但简而言之，延迟是指网站资源从服务器传输到用户计算机所需的时间。建立 TCP 和 HTTP 连接会产生开销，并且在网络上传输请求和响应字节时存在一些不可避免的延迟，但有一些方法可以减少延迟（例如，通过下载较少的文件来减少 HTTP 请求数量，使用CDN 使您的网站在全球范围内具有更好的性能，并使用 HTTP/2 更有效地从服务器提供文件）。您可以在理解延迟中详细了解此主题。