网络性能
构建网站需要 HTML、CSS 和 JavaScript。要构建人们想要使用的网站和应用来吸引和留住用户，你需要创造良好的用户体验。良好的用户体验的一部分是确保内容快速加载并响应用户交互。这称为 Web 性能，在本模块中，你将重点关注如何创建高性能网站的基础知识。
¥Building websites requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of good user experience is ensuring the content is quick to load and responsive to user interaction. This is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites.
我们的初学者学习材料的其余部分试图尽可能坚持 Web 最佳实践，例如性能和 accessibility，但是，最好也专门关注这些主题，并确保你熟悉它们。
¥The rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.
学习途径
¥Learning pathway
虽然了解 HTML、CSS 和 JavaScript 是实现许多 Web 性能改进建议所必需的，但了解如何构建应用并不是理解和衡量 Web 性能的必要先决条件。不过，我们建议你在学习本模块之前，至少通过我们的 开始使用网络 模块了解 Web 开发的基本概念。
¥While knowing HTML, CSS, and JavaScript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. We do however recommend that before you work through this module, you at least get a basic idea of web development by working through our Getting started with the web module.
通过以下模块更深入地了解这些主题也会很有帮助：
¥It would also be helpful to go a bit deeper into these topics, with modules such as:
一旦你学完本模块，你可能会很高兴深入了解 Web 性能 - 你可以在我们的 主要 MDN Web 性能部分 中找到许多进一步的教学内容，包括性能 API 概述、测试和分析工具以及性能瓶颈问题。
¥Once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main MDN Web performance section, including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.
指南
¥Guides
本主题包含以下指南。以下是处理这些问题的建议顺序；你绝对应该从第一个开始。
¥This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.
- Web 性能的 "why"
-
本文讨论为什么 Web 性能对于可访问性、用户体验和业务目标非常重要。
- 什么是网络性能？
-
你知道网络性能很重要，但是什么构成了网络性能呢？本文介绍了性能的组成部分，从网页加载和渲染，包括内容如何进入用户的浏览器进行查看，到我们在考虑性能时需要考虑哪些人群。
- 用户如何看待性能？
-
比网站的速度（以毫秒为单位）更重要的是用户感知网站的速度。这些感知受到实际页面加载时间、空闲、对用户交互的响应以及滚动和其他动画的平滑度的影响。在本文中，我们将讨论各种加载指标、动画和响应指标，以及改善用户感知（如果不是实际时间）的最佳实践。
- 测量性能
-
现在你已经了解了一些性能指标，我们将更深入地探讨性能工具、指标和 API，以及如何使性能成为 Web 开发工作流程的一部分。
- 多媒体：images
-
Web 性能最容易实现的成果通常是媒体优化。可以根据每个用户代理的功能、大小和像素密度提供不同的媒体文件。在本文中，我们讨论图片对性能的影响，以及减少每个图片发送的字节数的方法。
- 多媒体：video
-
Web 性能最容易实现的成果通常是媒体优化。在本文中，我们讨论视频内容对性能的影响，并介绍从背景视频中删除音轨等可以提高性能的技巧。
- JavaScript 性能优化
-
如果使用得当，JavaScript 可以实现交互式和沉浸式 Web 体验，但也可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。本文概述了一些 JavaScript 最佳实践，应考虑这些最佳实践，以确保即使是复杂的内容也能尽可能提高性能。
- HTML 性能优化
-
标记的某些属性和源顺序可能会影响网站的性能。通过最大限度地减少 DOM 节点的数量，确保使用最佳顺序和属性来包含样式、脚本、媒体和第三方脚本等内容，你可以显着改善用户体验。本文详细介绍了如何使用 HTML 来确保最佳性能。
- CSS 性能优化
-
CSS 可能不是提高性能的一个不太重要的优化重点，但有些 CSS 功能对性能的影响比其他功能更大。在本文中，我们研究了一些影响性能的 CSS 属性，并提出了处理样式的建议方法，以确保性能不会受到负面影响。
- 字体和性能
-
查看你是否需要包含外部字体，如果需要，如何包含你的设计所需的字体，同时对网站性能的影响最小。
- 移动性能
-
由于移动设备上的 Web 访问如此流行，并且所有移动平台都具有成熟的 Web 浏览器，但带宽、CPU 和电池寿命可能有限，因此考虑 Web 内容在这些平台上的性能非常重要。本文着眼于特定于移动设备的性能注意事项。
- Web 性能的商业案例
-
开发者可以采取很多措施来提高性能，但是多快才算足够快呢？你如何才能让当权者相信这些努力的重要性？优化后，如何确保不再出现膨胀？在本文中，我们着眼于令人信服的管理、制定性能文化和性能预算，并介绍确保回归不会潜入代码库的方法。
也可以看看
¥See also
- 网络性能资源
-
除了 HTML、CSS、JavaScript 和媒体文件的前端组件之外，还有一些功能可以使应用变慢，也可以使应用在主观和客观上更快。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不良实践。在这里，我们将在基础层面上介绍其中的许多功能，并提供更深入研究的链接，以提高每个主题的性能。
- 响应式图片
-
在本文中，我们将了解响应式图片的概念（在屏幕尺寸、分辨率和其他此类功能差异很大的设备上运行良好的图片），并了解 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备上的性能。响应式图片只是 响应式设计 的一部分，未来 CSS 主题供你学习。
- MDN 上的主要 Web 性能部分
-
我们的主要 Web 性能部分 — 在这里你将找到有关 Web 性能的更多详细信息，包括性能 API 概述、测试和分析工具以及性能瓶颈问题。