Web 性能
构建网站需要 HTML、CSS 和 JavaScript。要构建人们愿意使用的、能够吸引并留住用户的网站和应用程序，你需要创造良好的用户体验。良好的用户体验的一部分是确保内容加载速度快并且能够响应用户交互。这被称为Web 性能，在本模块中，你将专注于创建高性能网站的基础知识。
我们其余的初学者学习材料会尽量坚持 Web 最佳实践，例如性能和可访问性，但专门关注这些主题也是很好的，并确保你熟悉它们。
预备知识
虽然了解 HTML、CSS 和 JavaScript 对于实施许多 Web 性能改进建议是必需的，但了解如何构建应用程序并不是理解和衡量 Web 性能的必要前提。然而，我们建议你在学习本模块之前，至少通过学习我们的你的第一个网站模块对 Web 开发有一个基本了解。
深入研究这些主题也会很有帮助，例如通过以下模块：
指南
- Web 性能的“为什么”
-
本文讨论了为什么 Web 性能对可访问性、用户体验和你的业务目标很重要。
- 什么是 Web 性能？
-
你知道 Web 性能很重要，但 Web 性能是由什么构成的？本文介绍了性能的组成部分，从网页加载和渲染，包括你的内容如何进入用户的浏览器被查看，到我们在考虑性能时需要考虑的群体。
- 用户如何感知性能？
-
比你的网站在毫秒内的速度更重要的是，你的用户感知你的网站的速度。这些感知会受到实际页面加载时间、空闲时间、对用户交互的响应能力以及滚动和其他动画的流畅度的影响。在本文中，我们讨论了各种加载指标、动画和响应能力指标，以及改进用户感知（如果不是实际时间）的最佳实践。
- 测量性能
-
现在你已经了解了一些性能指标，我们将深入探讨性能工具、指标和 API，以及如何将性能融入 Web 开发工作流程。
- 多媒体：图片
-
Web 性能中最容易实现的改进通常是媒体优化。可以根据每个用户代理的功能、大小和像素密度来提供不同的媒体文件。在本文中，我们讨论了图片对性能的影响，以及减少每张图片发送字节数的方法。
- 多媒体：视频
-
Web 性能中最容易实现的改进通常是媒体优化。在本文中，我们讨论了视频内容对性能的影响，并介绍了一些技巧，例如从背景视频中删除音频轨道可以提高性能。
- JavaScript 性能优化
-
JavaScript，如果使用得当，可以实现交互式和沉浸式的 Web 体验 — 或者会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。本文概述了一些 JavaScript 最佳实践，应予以考虑，以确保即使是复杂的内容也能尽可能高效。
- HTML 性能优化
-
某些属性和标记的源顺序会影响你网站的性能。通过最小化 DOM 节点的数量，确保使用最佳顺序和属性来包含样式、脚本、媒体和第三方脚本等内容，你可以极大地改善用户体验。本文详细介绍了如何使用 HTML 来确保最大性能。
- CSS 性能优化
-
CSS 可能是改进性能的优化重点中不太重要的部分，但某些 CSS 功能对性能的影响比其他功能更大。在本文中，我们重点介绍一些影响性能的 CSS 属性，以及处理样式的建议方法，以确保性能不会受到负面影响。
- Web 性能的商业案例
-
开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服当权者这些努力的重要性？一旦优化完成，如何确保膨胀不会卷土重来？在本文中，我们讨论如何说服管理层、培养性能文化和性能预算，并介绍确保回归错误不会悄悄潜入你的代码库的方法。
- Web 性能最佳实践和技巧
-
本文以基本水平涵盖了几个主题，并提供了链接以深入了解每个主题以改进性能。除了 HTML、CSS、JavaScript 和媒体文件等前端主题外，它还涵盖了与 Web 性能相关的 API、开发人员工具、最佳实践和坏实践。
另见
- 响应式图片
-
在本文中，我们将了解响应式图片的概念 — 能够很好地适应屏幕尺寸、分辨率和其他功能的设备的图片 — 并探讨 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备的性能。响应式图片只是响应式设计的一部分，这是你将来要学习的 CSS 主题。
- MDN 上的主要 Web 性能部分
-
我们的主要 Web 性能部分 — 在这里，你将找到有关 Web 性能的更多详细信息，包括性能 API 的概述、测试和分析工具以及性能瓶颈的陷阱。