网页性能

虽然了解 HTML、CSS 和 JavaScript 是实施许多网站性能改进建议所必需的，但了解如何构建应用程序并不是理解和衡量网站性能的必要先决条件。但是，我们建议您在学习本模块之前，至少通过我们的网络入门模块了解一下基本 Web 开发知识。

深入了解这些主题也将会很有帮助，例如以下模块：

• HTML 简介
• CSS 初步
• JavaScript 初步

完成本模块后，您可能会很乐意更深入地了解 Web 性能——您可以在我们的主要 MDN Web 性能部分找到许多进一步的教学内容，包括性能 API 概述、测试和分析工具以及性能瓶颈陷阱。

本主题包含以下指南。以下是在学习过程中建议的顺序；您绝对应该从第一个开始。

Web 性能的“原因”

本文讨论了 Web 性能为何对可访问性、用户体验和您的业务目标至关重要。

什么是 Web 性能？

您知道 Web 性能很重要，但什么是 Web 性能？本文介绍了性能的组成部分，从网页加载和渲染开始，包括您的内容如何进入用户浏览器以供查看，到我们在考虑性能时需要考虑的人群。

用户如何感知性能？

比网站以毫秒为单位的速度更重要的是，用户感知网站的速度有多快。这些感知会受到实际页面加载时间、空闲时间、对用户交互的响应能力以及滚动和其他动画的流畅性的影响。在本文中，我们讨论了各种加载指标、动画和响应指标，以及改进用户感知（即使不是实际时间）的最佳实践。

衡量性能

现在您已经了解了一些性能指标，我们将更深入地探讨性能工具、指标和 API，以及如何将性能纳入 Web 开发工作流程。

多媒体：图像

Web 性能中最容易实现的优化通常是媒体优化。可以根据每个用户代理的功能、大小和像素密度提供不同的媒体文件。在本文中，我们将讨论图像对性能的影响，以及减少每个图像发送的字节数的方法。

多媒体：视频

Web 性能中最容易实现的优化通常是媒体优化。在本文中，我们将讨论视频内容对性能的影响，并介绍一些提示，例如从背景视频中删除音频轨道可以提高性能。

JavaScript 性能优化

JavaScript 如果使用得当，可以提供交互式且沉浸式的 Web 体验——或者它会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。本文概述了一些应考虑的 JavaScript 最佳实践，以确保即使是复杂的内容也能尽可能地提高性能。

HTML 性能优化

某些属性和标记的源顺序可能会影响网站的性能。通过最小化 DOM 节点数，确保使用最佳顺序和属性来包含内容（如样式、脚本、媒体和第三方脚本），您可以极大地改善用户体验。本文详细介绍了如何使用 HTML 来确保最大性能。

CSS 性能优化

CSS 可能是提高性能的次要优化重点，但某些 CSS 功能比其他功能对性能的影响更大。在本文中，我们将探讨一些影响性能的 CSS 属性，并建议处理样式的方法，以确保性能不受负面影响。

字体和性能

了解您是否需要包含外部字体，以及如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。

移动性能

随着移动设备上的 Web 访问变得如此普及，并且所有移动平台都拥有功能齐全的 Web 浏览器，但带宽、CPU 和电池寿命可能有限，因此考虑 Web 内容在这些平台上的性能非常重要。本文探讨了移动设备特有的性能注意事项。

Web 性能的商业案例

开发人员可以做很多事情来提高性能，但多快才算足够快？您如何说服相关人员重视这些努力？优化后，如何确保不会出现膨胀问题？在本文中，我们将探讨如何说服管理层、培养性能文化和性能预算，并介绍如何确保回归问题不会潜入您的代码库。

Web 性能资源

除了 HTML、CSS、JavaScript 和媒体文件等前端组件之外，还有一些功能会使应用程序变慢，还有一些功能会使应用程序在主观和客观上都变快。与 Web 性能相关的 API、开发人员工具、最佳实践和不良实践有很多。在这里，我们将介绍许多这些功能的基础知识，并提供链接以更深入地了解每个主题，从而提高性能。

响应式图像

在本文中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他此类功能差异很大的设备上都能良好运行的图像——并了解 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备上的性能。响应式图像只是响应式设计的一部分，响应式设计是您将来要学习的 CSS 主题。

MDN 上的主要 Web 性能部分

我们的主要 Web 性能部分——在这里，您将找到更多关于 Web 性能的详细信息，包括性能 API 概述、测试和分析工具以及性能瓶颈陷阱。