什么是 Web 性能？
网页性能旨在让网站变得快速，包括让缓慢的进程“看起来”快速。网站加载是否迅速，用户能否快速开始与它互动，并且在加载时间较长时（例如，显示加载动画）是否提供令人放心的反馈？滚动和动画是否流畅？本文简要介绍了客观的、可测量的网页性能*，探讨了网页优化所涉及的技术、技巧和工具。
| 预备知识 | 已安装基本软件，并具备 客户端 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更有效地从服务器提供文件）。你可以在理解延迟中阅读有关此主题的所有内容。
总结
暂时就到这里；我们希望我们对网页性能主题的简要概述能帮助你了解其全部内容，并让你对学习更多感到兴奋。接下来我们将探讨感知性能，以及如何使用一些巧妙的技术来让一些不可避免的性能影响对用户来说不那么严重，或者完全掩盖它们。