From 3c05a4042fe628ada31a9bc0cb0f6ae385defdf0 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Tue, 10 Sep 2024 18:09:22 +0800 Subject: [PATCH 01/14] update --- files/zh-cn/learn/performance/index.md | 35 ++++++++++++++------------ 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 281fd75a3e2641..061c688b2a2642 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -1,25 +1,28 @@ --- title: Web 性能 slug: Learn/Performance +page-type: learn-module +l10n: + sourceCommit: 5085525b3452de07dbac7fa700aaaf5ff5360a2f --- {{LearnSidebar}} -构建一个网站需要 HTML、CSS 和 JavaScript。为了构建人们需要的、能吸引和留住用户的网站和应用，你需要创建一个良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **web 性能**，在这个模块中，你将会学到构建性能良好的网站所需要的知识。 +构建网站需要 HTML、CSS 和 JavaScript。为了构建人们想使用的、能吸引和留住用户的网站和应用，你需要创建一个良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **Web 性能**，在这个模块中，你将会学到构建性能良好的网站所需要的知识。 -我们的初学者学习材料的其余部分尽量坚持网络最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门关注此类主题也是不错的，并确保你熟悉它们。 +我们的初学者学习材料的其余部分尽量坚持 Web 最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门关注此类主题也是不错的，并确保你熟悉它们。 -## 学习途径 +## 学习路径 -虽然了解 HTML、CSS 和 Javascript 是实现许多网页性能提升建议的必要条件，但了解如何构建应用却不是理解和衡量网页性能的必要先决条件。然而，我们建议你在学习本模块之前，至少通过学习我们的 [web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)模块，获得一个网络开发的基本概念。 +虽然了解 HTML、CSS 和 Javascript 是实现许多网页性能提升建议的必要条件，但了解如何构建应用却不是理解和衡量 Web 性能的必要先决条件。然而，我们真的建议你在学习本模块之前，通过学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)模块，至少对 Web 开发有基本的概念。 更深入进行以下主题也很有必要，这些模块包括： -- [HTML 入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) -- [CSS 初步](/zh-CN/docs/Learn/CSS/First_steps) -- [JavaScript 初步](/zh-CN/docs/Learn/JavaScript/First_steps) +- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) +- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) +- [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) -一旦你完成了这个模块的学习，你可能会对深入研究网络性能感到兴奋——你可以在我们的 [MDN 网络主要性能部分](/zh-CN/docs/Web/Performance)找到很多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈问题。 +一旦你完成了这个模块的学习，你可能会对深入研究网络性能感到兴奋——你可以在 [主要的 MDN Web 性能部分](/zh-CN/docs/Web/Performance)找到很多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈问题。 ## 指南 @@ -30,20 +33,20 @@ slug: Learn/Performance - [什么是 web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) - : 你知道网络性能很重要，但什么构成了网络性能？本文介绍了性能的组成部分，从网页的加载和渲染，包括你的内容如何进入用户的浏览器被浏览，到我们在考虑性能时需要考虑哪些群体的问题。 - [用户如何感知性能？](/zh-CN/docs/Learn/Performance/Perceived_performance) - - : 比你的网站有多快（以毫秒为单位）更重要的是你的用户认为你的网站有多快。这些感知受到实际页面加载时间、空闲、对用户互动的响应能力、滚动和其他动画的流畅度的影响。在这篇文章中，我们将讨论各种加载指标、动画和响应性指标，以及改善用户感知的最佳做法，如果不是实际时间的话。 + - : 比你的网站有多快（以毫秒为单位）更重要的是你的用户认为你的网站有多快。这些感知受到实际页面加载时间、空闲、对用户互动的响应能力、滚动和其他动画的流畅度的影响。在这篇文章中，我们将讨论各种加载指标、动画和响应性指标，以及改善用户感知的最佳实践，如果不是实际时间的话。 - [性能的衡量](/zh-CN/docs/Learn/Performance/Measuring_performance) - : 现在你已经了解了一些性能指标，我们将深入了解性能工具、指标和 API，以及我们如何使性能成为 Web 开发工作流程的一部分。 - [多媒体：图片](/zh-CN/docs/Learn/Performance/Multimedia) - : 最容易提升网络性能的方式往往是媒体优化。根据每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每张图像发送字节数的方法。 - [多媒体：视频](/zh-CN/docs/Learn/Performance/video) - : 最容易提升网络性能的方式往往是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并涵盖了从背景视频中删除音轨等技巧，可以提高性能。 -- [JavaScript 性能最佳实践](/zh-CN/docs/Learn/Performance/JavaScript) +- [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript) - : 如果使用得当，JavaScript 可以实现交互式和沉浸式的网络体验——反之则可能显著增加下载时间、渲染时间并损害应用性能、电池寿命和用户体验。本文概述了一些应该考虑的 JavaScript 最佳实践，以确保即使是复杂的内容也能尽可能地执行。 -- [HTML 性能特性](/zh-CN/docs/Learn/Performance/HTML) +- [HTML 性能优化](/zh-CN/docs/Learn/Performance/HTML) - : 一些属性和你的标记的源顺序会影响你的网站的性能。通过尽量减少 DOM 节点的数量，确保使用最佳的顺序和属性来包括样式、脚本、媒体和第三方脚本等内容，你可以大幅提高用户体验。这篇文章详细研究了如何使用 HTML 来确保最大的性能。 -- [CSS 性能特性](/zh-CN/docs/Learn/Performance/CSS) +- [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) - : 在提高性能方面，CSS 可能是一个不太重要的优化重点，但有一些 CSS 特性对性能的影响比其他的更大。在这篇文章中，我们看看一些影响性能的 CSS 属性，以及处理样式的建议方法，以确保性能不受负面影响。 -- [字体与性能](/zh-CN/docs/Learn/Performance/Fonts) +- [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) - : 看看你是否需要引入外部字体，如果需要，如何以对网站性能影响最小的方式引入你的设计所需的字体。 - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - : 随着移动设备上的网络访问普及，所有的移动平台都有成熟的网络浏览器，但可能存在带宽、CPU 和电池寿命受限等问题，因此必须考虑在这些平台上提供的 Web 内容的性能。本文探讨了针对移动设备的性能考虑。 @@ -55,6 +58,6 @@ slug: Learn/Performance - [Web 性能资源](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) - : 除了 HTML、CSS、JavaScript 和媒体文件等前端组件外，还有一些可以使应用程序变慢的功能和可以使应用程序在主观和客观上变快的功能。有许多与网络性能有关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍许多这些功能的基本水平，并提供更深入的链接，以提高每个主题的性能。 - [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - - : 在这篇文章中，我们将了解响应式图像的概念，并看看 HTML 提供了哪些工具来帮助实现它们。响应式图像是在屏幕尺寸、分辨率和其他类似特征差别很大的设备上能很好地工作的图像。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的一个 CSS 主题。 -- [MDN 上主要的 web 性能页面](/zh-CN/docs/Web/Performance) - - : 我们主要的网络性能部分。在这里你会发现更多关于网络性能的细节，包括性能 API 的概述，测试和分析工具，以及性能瓶颈的问题。 + - : 在这篇文章中，我们将了解响应式图片的概念——响应式图像是在屏幕尺寸、分辨率和其他类似特征差别很大的设备上能很好地工作的图片——并看看 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备的性能。响应式图片只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的一个 CSS 主题。 +- [MDN 上主要的 Web 性能部分](/zh-CN/docs/Web/Performance) + - : 我们主要的 Web 性能部分。在这里你会发现更多关于 Web 性能的细节，包括性能 API 的概述，测试和分析工具，以及性能瓶颈的问题。 From 60ba384f82f0ce2be10738ad5ba2c738c952ee6f Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Wed, 11 Sep 2024 15:15:30 +0800 Subject: [PATCH 02/14] update --- files/zh-cn/learn/performance/index.md | 56 +++++++++++++------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 061c688b2a2642..3cb6aa83390d54 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -8,56 +8,56 @@ l10n: {{LearnSidebar}} -构建网站需要 HTML、CSS 和 JavaScript。为了构建人们想使用的、能吸引和留住用户的网站和应用，你需要创建一个良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **Web 性能**，在这个模块中，你将会学到构建性能良好的网站所需要的知识。 +构建网站需要 HTML、CSS 和 JavaScript。要构建人们想要使用的网站和应用程序，吸引并留住用户，你需要创造良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **Web 性能**，在本模块中，你将专注于创建高性能网站的基础知识。 -我们的初学者学习材料的其余部分尽量坚持 Web 最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门关注此类主题也是不错的，并确保你熟悉它们。 +我们初学者的学习材料的其他部分尽可能地坚持 Web 最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门专注于这些主题也很好，并确保你熟悉它们。 ## 学习路径 -虽然了解 HTML、CSS 和 Javascript 是实现许多网页性能提升建议的必要条件，但了解如何构建应用却不是理解和衡量 Web 性能的必要先决条件。然而，我们真的建议你在学习本模块之前，通过学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)模块，至少对 Web 开发有基本的概念。 +虽然了解 HTML、CSS 和 JavaScript 对于实施许多 Web 性能改进建议是必要的，但知道如何构建应用程序并不是理解并测量 Web 性能的必要前提。然而，我们建议你在学习本模块之前，至少通过我们的 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)模块对 Web 开发有一个基本的了解。 -更深入进行以下主题也很有必要，这些模块包括： +深入了解这些主题也会有所帮助，例如： - [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) - [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) - [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) -一旦你完成了这个模块的学习，你可能会对深入研究网络性能感到兴奋——你可以在 [主要的 MDN Web 性能部分](/zh-CN/docs/Web/Performance)找到很多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈问题。 +一旦你完成了本模块的学习，你可能会对深入研究 Web 性能感到兴奋——你可以在我们的[主要 MDN Web 性能部分](/zh-CN/docs/Web/Performance)找到许多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 ## 指南 -本专题包含以下指南。以下是建议的学习顺序；你肯定应该从第一个开始。 +本主题包含以下指南。以下是学习它们的建议顺序；你绝对应该从第一个开始。 -- [为什么要提升 web 性能](/zh-CN/docs/Learn/Performance/why_web_performance) - - : 本文讨论了为什么网络性能对无障碍、用户体验和你的商业目标很重要。 -- [什么是 web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) - - : 你知道网络性能很重要，但什么构成了网络性能？本文介绍了性能的组成部分，从网页的加载和渲染，包括你的内容如何进入用户的浏览器被浏览，到我们在考虑性能时需要考虑哪些群体的问题。 +- [为什么关注 Web 性能](/zh-CN/docs/Learn/Performance/why_web_performance) + - : 这篇文章讨论了 Web 性能对于无障碍、用户体验和你的业务目标的重要性。 +- [什么是 Web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) + - : 你知道 Web 性能很重要，但什么是 Web 性能？这篇文章介绍了性能的组成部分，从网页加载和渲染，包括你的内容如何进入用户的浏览器以供查看，到我们在考虑性能时需要考虑的人群。 - [用户如何感知性能？](/zh-CN/docs/Learn/Performance/Perceived_performance) - - : 比你的网站有多快（以毫秒为单位）更重要的是你的用户认为你的网站有多快。这些感知受到实际页面加载时间、空闲、对用户互动的响应能力、滚动和其他动画的流畅度的影响。在这篇文章中，我们将讨论各种加载指标、动画和响应性指标，以及改善用户感知的最佳实践，如果不是实际时间的话。 -- [性能的衡量](/zh-CN/docs/Learn/Performance/Measuring_performance) - - : 现在你已经了解了一些性能指标，我们将深入了解性能工具、指标和 API，以及我们如何使性能成为 Web 开发工作流程的一部分。 -- [多媒体：图片](/zh-CN/docs/Learn/Performance/Multimedia) - - : 最容易提升网络性能的方式往往是媒体优化。根据每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每张图像发送字节数的方法。 + - : 比你的网站以毫秒记得加载速度更重要的是用户感知到的网站速度。这些感知受到实际页面加载时间、空闲时间、响应用户交互的速度以及滚动和其他动画的平滑度的影响。在这篇文章中，我们讨论了各种加载指标、动画和响应性指标，以及改进用户感知（即使不是实际时间）的最佳实践。 +- [测量性能](/zh-CN/docs/Learn/Performance/Measuring_performance) + - : 既然你了解了一些性能指标，我们将深入探讨性能工具、指标和 API，以及如何将性能作为 Web 开发工作流程的一部分。 +- [多媒体：图像](/zh-CN/docs/Learn/Performance/Multimedia) + - : 最容易提升 Web 性能的方式通常是媒体优化。根据每个用户代理的能力、大小和像素密度提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每个图像发送的字节数的方法。 - [多媒体：视频](/zh-CN/docs/Learn/Performance/video) - - : 最容易提升网络性能的方式往往是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并涵盖了从背景视频中删除音轨等技巧，可以提高性能。 + - : 最容易提升 Web 性能的方式通常是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并提供了一些技巧，如从背景视频中删除音轨可以提高性能。 - [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript) - - : 如果使用得当，JavaScript 可以实现交互式和沉浸式的网络体验——反之则可能显著增加下载时间、渲染时间并损害应用性能、电池寿命和用户体验。本文概述了一些应该考虑的 JavaScript 最佳实践，以确保即使是复杂的内容也能尽可能地执行。 + - : JavaScript，如果使用得当，可以实现交互式和沉浸式的 Web 体验——或者它可能会显著损害下载时间、渲染时间、应用程序性能、电池寿命和用户体验。这篇文章概述了一些应考虑的 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能高效。 - [HTML 性能优化](/zh-CN/docs/Learn/Performance/HTML) - - : 一些属性和你的标记的源顺序会影响你的网站的性能。通过尽量减少 DOM 节点的数量，确保使用最佳的顺序和属性来包括样式、脚本、媒体和第三方脚本等内容，你可以大幅提高用户体验。这篇文章详细研究了如何使用 HTML 来确保最大的性能。 + - : 某些属性和标记的源顺序可能会影响你网站的性能。通过最小化 DOM 节点的数量，确保为包含的内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，你可以显著改善用户体验。这篇文章详细介绍了如何使用 HTML 来确保最大性能。 - [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) - - : 在提高性能方面，CSS 可能是一个不太重要的优化重点，但有一些 CSS 特性对性能的影响比其他的更大。在这篇文章中，我们看看一些影响性能的 CSS 属性，以及处理样式的建议方法，以确保性能不受负面影响。 + - : CSS 可能不是改进性能的重要优化关注点，但有些 CSS 特性比其他特性对性能的影响更大。在这篇文章中，我们介绍了一些影响性能的 CSS 属性，并建议了一些处理样式的方法，以确保性能不会受到负面影响。 - [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) - - : 看看你是否需要引入外部字体，如果需要，如何以对网站性能影响最小的方式引入你的设计所需的字体。 + - : 本文探讨了你是否需要包含外部字体，如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。 - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - - : 随着移动设备上的网络访问普及，所有的移动平台都有成熟的网络浏览器，但可能存在带宽、CPU 和电池寿命受限等问题，因此必须考虑在这些平台上提供的 Web 内容的性能。本文探讨了针对移动设备的性能考虑。 -- [web 性能的商业案例](/zh-CN/docs/Learn/Performance/business_case_for_performance) - - : 开发人员可以采取许多措施来提高系统的性能，但是什么样的速度才算快？如何说服管理层重视这些努力？一旦优化完成，如何确保系统不会再次出现性能问题？本文将探讨如何说服管理层、如何培养性能文化和制定性能预算，并介绍确保系统不会出现性能回退的方法。 + - : 由于在移动设备上访问 Web 非常流行，所有移动平台都有功能齐全的 Web 浏览器，但可能存在带宽、CPU 和电池寿命的限制，因此考虑这些平台上 Web 内容的性能非常重要。这篇文章探讨了移动设备特有的性能考虑因素。 +- [Web 性能的商业案例](/zh-CN/docs/Learn/Performance/business_case_for_performance) + - : 开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服管理层这些努力的重要性？一旦优化，你如何确保不会再次出现性能问题？在本文中，我们探讨了如何说服管理层、发展性能文化、制定性能预算，并介绍了一些确保不会出现性能回退的方法。 ## 参见 - [Web 性能资源](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) - - : 除了 HTML、CSS、JavaScript 和媒体文件等前端组件外，还有一些可以使应用程序变慢的功能和可以使应用程序在主观和客观上变快的功能。有许多与网络性能有关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍许多这些功能的基本水平，并提供更深入的链接，以提高每个主题的性能。 -- [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - - : 在这篇文章中，我们将了解响应式图片的概念——响应式图像是在屏幕尺寸、分辨率和其他类似特征差别很大的设备上能很好地工作的图片——并看看 HTML 提供了哪些工具来帮助实现它们。这有助于提高不同设备的性能。响应式图片只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的一个 CSS 主题。 -- [MDN 上主要的 Web 性能部分](/zh-CN/docs/Web/Performance) - - : 我们主要的 Web 性能部分。在这里你会发现更多关于 Web 性能的细节，包括性能 API 的概述，测试和分析工具，以及性能瓶颈的问题。 + - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有一些功能可以使应用程序变慢，也有一些功能可以使应用程序在主观和客观上都更快。有许多与 Web 性能相关的 API、开发工具、最佳实践和不良实践。在这里，我们将介绍许多功能的基本知识，并提供深入了解每个主题以提高性能的链接。 +- [响应式图像](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他功能差异很大的设备上表现良好的图像——并了解 HTML 提供的工具，以帮助实现它们。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 +- [MDN 上的主要 Web 性能部分](/zh-CN/docs/Web/Performance) + - : 我们的主要 Web 性能部分——在这里，你将找到更多关于 Web 性能的详细信息，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 From e800c6acd65392b016922d3d2a6dc684e30a9571 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Thu, 12 Sep 2024 16:47:41 +0800 Subject: [PATCH 03/14] update --- files/zh-cn/learn/performance/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 3cb6aa83390d54..ab7d48130d3117 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -8,9 +8,9 @@ l10n: {{LearnSidebar}} -构建网站需要 HTML、CSS 和 JavaScript。要构建人们想要使用的网站和应用程序，吸引并留住用户，你需要创造良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **Web 性能**，在本模块中，你将专注于创建高性能网站的基础知识。 +构建网站需要 HTML、CSS 和 JavaScript。要构建人们想要使用、吸引并留住用户的网站和应用程序，你需要创造良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **Web 性能**，在本模块中，你将专注于创建高性能网站的基础知识。 -我们初学者的学习材料的其他部分尽可能地坚持 Web 最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门专注于这些主题也很好，并确保你熟悉它们。 +我们初学者的学习材料的其他部分尽可能地坚持 Web 最佳实践，如性能和[无障碍](/zh-CN/docs/Learn/Accessibility)，然而，专门专注于这些主题并确保你熟悉它们也很好。 ## 学习路径 @@ -31,9 +31,9 @@ l10n: - [为什么关注 Web 性能](/zh-CN/docs/Learn/Performance/why_web_performance) - : 这篇文章讨论了 Web 性能对于无障碍、用户体验和你的业务目标的重要性。 - [什么是 Web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) - - : 你知道 Web 性能很重要，但什么是 Web 性能？这篇文章介绍了性能的组成部分，从网页加载和渲染，包括你的内容如何进入用户的浏览器以供查看，到我们在考虑性能时需要考虑的人群。 + - : 你知道 Web 性能很重要，但什么是 Web 性能？这篇文章介绍了性能的组成部分，从网页加载和渲染（包括你的内容如何进入用户的浏览器以供查看），到我们在考虑性能时需要考虑的人群。 - [用户如何感知性能？](/zh-CN/docs/Learn/Performance/Perceived_performance) - - : 比你的网站以毫秒记得加载速度更重要的是用户感知到的网站速度。这些感知受到实际页面加载时间、空闲时间、响应用户交互的速度以及滚动和其他动画的平滑度的影响。在这篇文章中，我们讨论了各种加载指标、动画和响应性指标，以及改进用户感知（即使不是实际时间）的最佳实践。 + - : 比你的网站以毫秒为单位的加载速度更重要的是用户感知到的网站速度。这些感知受到实际页面加载时间、空闲时间、响应用户交互的速度以及滚动和其他动画的平滑度的影响。在这篇文章中，我们讨论了各种加载指标、动画和响应性指标，以及改进用户感知（即使不是实际时间）的最佳实践。 - [测量性能](/zh-CN/docs/Learn/Performance/Measuring_performance) - : 既然你了解了一些性能指标，我们将深入探讨性能工具、指标和 API，以及如何将性能作为 Web 开发工作流程的一部分。 - [多媒体：图像](/zh-CN/docs/Learn/Performance/Multimedia) @@ -49,7 +49,7 @@ l10n: - [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) - : 本文探讨了你是否需要包含外部字体，如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。 - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - - : 由于在移动设备上访问 Web 非常流行，所有移动平台都有功能齐全的 Web 浏览器，但可能存在带宽、CPU 和电池寿命的限制，因此考虑这些平台上 Web 内容的性能非常重要。这篇文章探讨了移动设备特有的性能考虑因素。 + - : 由于在移动设备上访问 Web 非常流行，并且所有移动平台都有功能齐全的 Web 浏览器，但可能存在带宽、CPU 和电池寿命的限制，因此考虑这些平台上 Web 内容的性能非常重要。这篇文章探讨了移动设备特有的性能考虑因素。 - [Web 性能的商业案例](/zh-CN/docs/Learn/Performance/business_case_for_performance) - : 开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服管理层这些努力的重要性？一旦优化，你如何确保不会再次出现性能问题？在本文中，我们探讨了如何说服管理层、发展性能文化、制定性能预算，并介绍了一些确保不会出现性能回退的方法。 @@ -58,6 +58,6 @@ l10n: - [Web 性能资源](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有一些功能可以使应用程序变慢，也有一些功能可以使应用程序在主观和客观上都更快。有许多与 Web 性能相关的 API、开发工具、最佳实践和不良实践。在这里，我们将介绍许多功能的基本知识，并提供深入了解每个主题以提高性能的链接。 - [响应式图像](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他功能差异很大的设备上表现良好的图像——并了解 HTML 提供的工具，以帮助实现它们。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 + - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他功能差异很大的设备上表现良好的图像——并了解 HTML 提供的帮助实现它们的工具。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 - [MDN 上的主要 Web 性能部分](/zh-CN/docs/Web/Performance) - : 我们的主要 Web 性能部分——在这里，你将找到更多关于 Web 性能的详细信息，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 From 9a8154600b5f59bda82bce82b1de4b03b87d57db Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Thu, 12 Sep 2024 19:23:38 +0800 Subject: [PATCH 04/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/learn/performance/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index ab7d48130d3117..f995ffc967e256 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -1,7 +1,6 @@ --- title: Web 性能 slug: Learn/Performance -page-type: learn-module l10n: sourceCommit: 5085525b3452de07dbac7fa700aaaf5ff5360a2f --- From bade3108b12f8c07cb5b469b0bfc36ff1537e7e3 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Sun, 15 Sep 2024 14:09:27 +0800 Subject: [PATCH 05/14] =?UTF-8?q?=E5=B0=86=20=E6=9C=AC=E6=96=87=20?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=20=E8=BF=99=E7=AF=87=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/zh-cn/learn/performance/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index f995ffc967e256..9cde865545271a 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -46,11 +46,11 @@ l10n: - [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) - : CSS 可能不是改进性能的重要优化关注点，但有些 CSS 特性比其他特性对性能的影响更大。在这篇文章中，我们介绍了一些影响性能的 CSS 属性，并建议了一些处理样式的方法，以确保性能不会受到负面影响。 - [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) - - : 本文探讨了你是否需要包含外部字体，如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。 + - : 这篇文章探讨了你是否需要包含外部字体，如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。 - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - : 由于在移动设备上访问 Web 非常流行，并且所有移动平台都有功能齐全的 Web 浏览器，但可能存在带宽、CPU 和电池寿命的限制，因此考虑这些平台上 Web 内容的性能非常重要。这篇文章探讨了移动设备特有的性能考虑因素。 - [Web 性能的商业案例](/zh-CN/docs/Learn/Performance/business_case_for_performance) - - : 开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服管理层这些努力的重要性？一旦优化，你如何确保不会再次出现性能问题？在本文中，我们探讨了如何说服管理层、发展性能文化、制定性能预算，并介绍了一些确保不会出现性能回退的方法。 + - : 开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服管理层这些努力的重要性？一旦优化，你如何确保不会再次出现性能问题？在这篇文章中，我们探讨了如何说服管理层、发展性能文化、制定性能预算，并介绍了一些确保不会出现性能回退的方法。 ## 参见 From 3bc57e3bcd4b09cbe73f9421f620dad841724bac Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:10:22 +0800 Subject: [PATCH 06/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 9cde865545271a..977c7d4ea24c02 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -27,7 +27,7 @@ l10n: 本主题包含以下指南。以下是学习它们的建议顺序；你绝对应该从第一个开始。 -- [为什么关注 Web 性能](/zh-CN/docs/Learn/Performance/why_web_performance) +- [Web 性能的重要性](/zh-CN/docs/Learn/Performance/why_web_performance) - : 这篇文章讨论了 Web 性能对于无障碍、用户体验和你的业务目标的重要性。 - [什么是 Web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) - : 你知道 Web 性能很重要，但什么是 Web 性能？这篇文章介绍了性能的组成部分，从网页加载和渲染（包括你的内容如何进入用户的浏览器以供查看），到我们在考虑性能时需要考虑的人群。 From b4d1b1732ecfdca6f5998ddce29893cf23d10247 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:11:45 +0800 Subject: [PATCH 07/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 977c7d4ea24c02..1677a8c27cb0b0 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -36,7 +36,7 @@ l10n: - [测量性能](/zh-CN/docs/Learn/Performance/Measuring_performance) - : 既然你了解了一些性能指标，我们将深入探讨性能工具、指标和 API，以及如何将性能作为 Web 开发工作流程的一部分。 - [多媒体：图像](/zh-CN/docs/Learn/Performance/Multimedia) - - : 最容易提升 Web 性能的方式通常是媒体优化。根据每个用户代理的能力、大小和像素密度提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每个图像发送的字节数的方法。 + - : 最容易提升 Web 性能的方式通常是媒体优化。根据每个用户代理的能力、尺寸和像素密度提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每个图像发送的字节数的方法。 - [多媒体：视频](/zh-CN/docs/Learn/Performance/video) - : 最容易提升 Web 性能的方式通常是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并提供了一些技巧，如从背景视频中删除音轨可以提高性能。 - [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript) From 5c5213d4813e7b54b423d954c5509b6bf6b59f48 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:12:44 +0800 Subject: [PATCH 08/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 1677a8c27cb0b0..4af4f5b982349b 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -40,7 +40,7 @@ l10n: - [多媒体：视频](/zh-CN/docs/Learn/Performance/video) - : 最容易提升 Web 性能的方式通常是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并提供了一些技巧，如从背景视频中删除音轨可以提高性能。 - [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript) - - : JavaScript，如果使用得当，可以实现交互式和沉浸式的 Web 体验——或者它可能会显著损害下载时间、渲染时间、应用程序性能、电池寿命和用户体验。这篇文章概述了一些应考虑的 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能高效。 + - : JavaScript，如果使用得当，可以实现交互式和沉浸式的 Web 体验——反之则可能会显著损害下载时间、渲染时间、应用程序性能、电池寿命和用户体验。这篇文章概述了一些应考虑的 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能高效。 - [HTML 性能优化](/zh-CN/docs/Learn/Performance/HTML) - : 某些属性和标记的源顺序可能会影响你网站的性能。通过最小化 DOM 节点的数量，确保为包含的内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，你可以显著改善用户体验。这篇文章详细介绍了如何使用 HTML 来确保最大性能。 - [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) From 615d1cb575e175562ab9a93363126e022cdeb375 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:13:20 +0800 Subject: [PATCH 09/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 4af4f5b982349b..10dd550bff7c1c 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -42,7 +42,7 @@ l10n: - [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript) - : JavaScript，如果使用得当，可以实现交互式和沉浸式的 Web 体验——反之则可能会显著损害下载时间、渲染时间、应用程序性能、电池寿命和用户体验。这篇文章概述了一些应考虑的 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能高效。 - [HTML 性能优化](/zh-CN/docs/Learn/Performance/HTML) - - : 某些属性和标记的源顺序可能会影响你网站的性能。通过最小化 DOM 节点的数量，确保为包含的内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，你可以显著改善用户体验。这篇文章详细介绍了如何使用 HTML 来确保最大性能。 + - : 某些属性和标记的源顺序可能会影响你网站的性能。通过最小化 DOM 节点的数量，确保为包含的内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，你可以显著改善用户体验。这篇文章详细介绍了如何使用 HTML 来确保最佳性能。 - [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) - : CSS 可能不是改进性能的重要优化关注点，但有些 CSS 特性比其他特性对性能的影响更大。在这篇文章中，我们介绍了一些影响性能的 CSS 属性，并建议了一些处理样式的方法，以确保性能不会受到负面影响。 - [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) From cf18ed8992dbf68fce78c9a243df1cee98b9d243 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:14:28 +0800 Subject: [PATCH 10/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 10dd550bff7c1c..76fec697c50dd5 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -44,7 +44,7 @@ l10n: - [HTML 性能优化](/zh-CN/docs/Learn/Performance/HTML) - : 某些属性和标记的源顺序可能会影响你网站的性能。通过最小化 DOM 节点的数量，确保为包含的内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，你可以显著改善用户体验。这篇文章详细介绍了如何使用 HTML 来确保最佳性能。 - [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS) - - : CSS 可能不是改进性能的重要优化关注点，但有些 CSS 特性比其他特性对性能的影响更大。在这篇文章中，我们介绍了一些影响性能的 CSS 属性，并建议了一些处理样式的方法，以确保性能不会受到负面影响。 + - : CSS 可能不是改进性能的重要优化关注点，但有些 CSS 特性对性能的影响比其他的更大。在这篇文章中，我们介绍了一些影响性能的 CSS 属性，并提出了一些有关处理样式的方法的建议，以确保性能不受负面影响。 - [字体和性能](/zh-CN/docs/Learn/Performance/Fonts) - : 这篇文章探讨了你是否需要包含外部字体，如果需要，如何以对网站性能影响最小的方式包含设计所需的字体。 - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) From 9bcf2f74698d0f388f38b3fe3a950b2c74d657b8 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:20:59 +0800 Subject: [PATCH 11/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 76fec697c50dd5..04660578914270 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -55,7 +55,7 @@ l10n: ## 参见 - [Web 性能资源](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) - - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有一些功能可以使应用程序变慢，也有一些功能可以使应用程序在主观和客观上都更快。有许多与 Web 性能相关的 API、开发工具、最佳实践和不良实践。在这里，我们将介绍许多功能的基本知识，并提供深入了解每个主题以提高性能的链接。 + - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有可以使应用程序变慢的特性和可以使应用程序在主观和客观上都变快的特性。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍这些特性的基本知识，并针对每个主题都提供了更深入地提升性能的链接。 - [响应式图像](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他功能差异很大的设备上表现良好的图像——并了解 HTML 提供的帮助实现它们的工具。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 - [MDN 上的主要 Web 性能部分](/zh-CN/docs/Web/Performance) From 9ad984612065584bc76d4d675c750ff31473a70c Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:22:10 +0800 Subject: [PATCH 12/14] Update files/zh-cn/learn/performance/index.md Co-authored-by: A1lo --- files/zh-cn/learn/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index 04660578914270..d6595c5a8fe817 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -57,6 +57,6 @@ l10n: - [Web 性能资源](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有可以使应用程序变慢的特性和可以使应用程序在主观和客观上都变快的特性。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍这些特性的基本知识，并针对每个主题都提供了更深入地提升性能的链接。 - [响应式图像](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他功能差异很大的设备上表现良好的图像——并了解 HTML 提供的帮助实现它们的工具。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 + - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他特征差异很大的设备上表现良好的图像——并了解 HTML 提供的帮助实现它们的工具。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 - [MDN 上的主要 Web 性能部分](/zh-CN/docs/Web/Performance) - : 我们的主要 Web 性能部分——在这里，你将找到更多关于 Web 性能的详细信息，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 From 0caf84ea82ebbf99573aa8389244e2f23db49ce7 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Wed, 18 Sep 2024 11:48:49 +0800 Subject: [PATCH 13/14] =?UTF-8?q?=E5=B0=86=E6=A0=87=E9=A2=98=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=8E=9F=E6=9D=A5=E7=9A=84=E7=BF=BB=E8=AF=91=EF=BC=8C?= =?UTF-8?q?=E5=90=8D=E8=AF=8D=E6=80=A7=E7=9A=84=E8=A1=A8=E8=BE=BE=E6=9B=B4?= =?UTF-8?q?=E7=AC=A6=E5=90=88=E6=A0=87=E9=A2=98=E8=BF=99=E4=B8=AA=E8=A7=92?= =?UTF-8?q?=E8=89=B2=EF=BC=9B=20=E4=B8=8D=E9=87=87=E7=94=A8=E2=80=98?= =?UTF-8?q?=E6=97=A2=E7=84=B6=E2=80=99=E8=BF=99=E4=B8=AA=E8=AF=8D=E7=9A=84?= =?UTF-8?q?=E8=AF=9D=EF=BC=8C=E8=BF=98=E6=98=AF=E9=9C=80=E8=A6=81=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=E8=AF=8D=E6=9D=A5=E8=A1=A8=E8=BE=BE=E5=9B=A0=E6=9E=9C?= =?UTF-8?q?=E6=88=96=E9=80=92=E8=BF=9B=E5=85=B3=E7=B3=BB=EF=BC=9B=20Web=20?= =?UTF-8?q?=E6=80=A7=E8=83=BD=E7=9A=84=E5=95=86=E4=B8=9A=E6=A1=88=E4=BE=8B?= =?UTF-8?q?=20=E6=8D=A2=E6=88=90=E5=8E=9F=E6=9D=A5=E7=9A=84=E7=BF=BB?= =?UTF-8?q?=E8=AF=91=EF=BC=8C=E5=B0=86=20=E6=9C=AC=E6=96=87=20=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=20=E8=BF=99=E7=AF=87=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/zh-cn/learn/performance/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index d6595c5a8fe817..baa7346b2e0350 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -33,8 +33,8 @@ l10n: - : 你知道 Web 性能很重要，但什么是 Web 性能？这篇文章介绍了性能的组成部分，从网页加载和渲染（包括你的内容如何进入用户的浏览器以供查看），到我们在考虑性能时需要考虑的人群。 - [用户如何感知性能？](/zh-CN/docs/Learn/Performance/Perceived_performance) - : 比你的网站以毫秒为单位的加载速度更重要的是用户感知到的网站速度。这些感知受到实际页面加载时间、空闲时间、响应用户交互的速度以及滚动和其他动画的平滑度的影响。在这篇文章中，我们讨论了各种加载指标、动画和响应性指标，以及改进用户感知（即使不是实际时间）的最佳实践。 -- [测量性能](/zh-CN/docs/Learn/Performance/Measuring_performance) - - : 既然你了解了一些性能指标，我们将深入探讨性能工具、指标和 API，以及如何将性能作为 Web 开发工作流程的一部分。 +- [性能的衡量](/zh-CN/docs/Learn/Performance/Measuring_performance) + - : 现在你已经了解了一些性能指标，接下来我们将深入探讨性能工具、指标和 API，以及如何将性能作为 Web 开发工作流程的一部分。 - [多媒体：图像](/zh-CN/docs/Learn/Performance/Multimedia) - : 最容易提升 Web 性能的方式通常是媒体优化。根据每个用户代理的能力、尺寸和像素密度提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每个图像发送的字节数的方法。 - [多媒体：视频](/zh-CN/docs/Learn/Performance/video) @@ -50,7 +50,7 @@ l10n: - [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - : 由于在移动设备上访问 Web 非常流行，并且所有移动平台都有功能齐全的 Web 浏览器，但可能存在带宽、CPU 和电池寿命的限制，因此考虑这些平台上 Web 内容的性能非常重要。这篇文章探讨了移动设备特有的性能考虑因素。 - [Web 性能的商业案例](/zh-CN/docs/Learn/Performance/business_case_for_performance) - - : 开发人员可以做很多事情来提高性能，但多快才算足够快？你如何说服管理层这些努力的重要性？一旦优化，你如何确保不会再次出现性能问题？在这篇文章中，我们探讨了如何说服管理层、发展性能文化、制定性能预算，并介绍了一些确保不会出现性能回退的方法。 + - : 开发人员可以采取许多措施来提高系统的性能，但是什么样的速度才算快？如何说服管理层重视这些努力？一旦优化完成，如何确保系统不会再次出现性能问题？这篇文章将探讨如何说服管理层、如何培养性能文化和制定性能预算，并介绍确保系统不会出现性能回退的方法。 ## 参见 From 3045ba192d33083420ad4a20928ee17709d12c38 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Wed, 18 Sep 2024 12:10:36 +0800 Subject: [PATCH 14/14] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E8=A1=A8=E8=BE=BE=E8=AE=A9=E8=AF=AD=E5=8F=A5=E6=9B=B4=E9=80=9A?= =?UTF-8?q?=E9=A1=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/zh-cn/learn/performance/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/learn/performance/index.md b/files/zh-cn/learn/performance/index.md index baa7346b2e0350..e71072a9bb4f1e 100644 --- a/files/zh-cn/learn/performance/index.md +++ b/files/zh-cn/learn/performance/index.md @@ -21,11 +21,11 @@ l10n: - [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) - [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) -一旦你完成了本模块的学习，你可能会对深入研究 Web 性能感到兴奋——你可以在我们的[主要 MDN Web 性能部分](/zh-CN/docs/Web/Performance)找到许多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 +一旦你完成了本模块的学习，你可能会对深入研究 Web 性能感到兴奋——你可以在我们[主要的 MDN Web 性能部分](/zh-CN/docs/Web/Performance)找到许多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 ## 指南 -本主题包含以下指南。以下是学习它们的建议顺序；你绝对应该从第一个开始。 +本主题包含以下指南。以下是建议的学习顺序；你绝对应该从第一个开始。 - [Web 性能的重要性](/zh-CN/docs/Learn/Performance/why_web_performance) - : 这篇文章讨论了 Web 性能对于无障碍、用户体验和你的业务目标的重要性。 @@ -58,5 +58,5 @@ l10n: - : 除了 HTML、CSS、JavaScript 和媒体文件的前端组件外，还有可以使应用程序变慢的特性和可以使应用程序在主观和客观上都变快的特性。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍这些特性的基本知识，并针对每个主题都提供了更深入地提升性能的链接。 - [响应式图像](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - : 在这篇文章中，我们将学习响应式图像的概念——在屏幕尺寸、分辨率和其他特征差异很大的设备上表现良好的图像——并了解 HTML 提供的帮助实现它们的工具。这有助于提高不同设备的性能。响应式图像只是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的一部分，这是你未来要学习的 CSS 主题。 -- [MDN 上的主要 Web 性能部分](/zh-CN/docs/Web/Performance) - - : 我们的主要 Web 性能部分——在这里，你将找到更多关于 Web 性能的详细信息，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。 +- [MDN 上主要的 Web 性能部分](/zh-CN/docs/Web/Performance) + - : 我们主要的 Web 性能部分——在这里，你将找到更多关于 Web 性能的详细信息，包括性能 API 的概述、测试和分析工具，以及性能瓶颈的陷阱。