Web 性能

Web 性能是对加载时间和运行时进行客观测量和用户感知体验。Web 性能是指网站加载、变得可交互和响应所需的时间，以及用户交互过程中内容的流畅度。性能涉及以下问题：滚动是否流畅？按钮是否响应迅速？弹窗是否快速加载并流畅动画？客观测量包括加载时间、每秒帧数和变得可交互所需的时间，而主观体验是指内容加载所需的感觉时间。

网站响应时间越长，用户放弃网站的可能性就越大。因此，最大程度地缩短加载和响应时间，并尽快让体验尽可能可用和可交互，同时异步加载体验的较长尾部部分，从而通过添加额外的功能来掩盖延迟，这一点非常重要。

有各种工具、API 和最佳实践可以帮助我们衡量和提升 Web 性能。我们将在接下来的页面中介绍它们。

Web 性能指南

性能指南是描述浏览器如何工作、哪些因素影响性能以及如何衡量、优化和监控应用程序各个方面性能的资源。

性能基础: 性能意味着效率。在开放网络应用的背景下，本文档总体解释了什么是性能，浏览器平台如何帮助提升性能，以及你可以使用哪些工具和流程来测试和提升性能。
填充页面：浏览器如何工作: 用户希望 Web 体验内容加载快速且交互流畅。因此，开发者应努力实现这两个目标。要了解如何提升性能和感知性能，了解浏览器的工作原理会有所帮助。
理解延迟: 延迟是指数据包从源到目的地所需的时间。在性能优化方面，重要的是要优化以减少导致延迟的原因，并通过模拟高延迟来测试网站性能，从而为连接速度慢或不可靠的用户进行优化。
推荐的 Web 性能时间：多长时间算太长？: 对于页面加载速度慢的明确规则没有明确规定，但有具体的指导原则用于指示内容将加载（1 秒）、空闲（50 毫秒）、动画（16.7 毫秒）和响应用户输入（50 到 200 毫秒）。
使用 dns-prefetch: DNS-prefetch 是在请求资源之前尝试解析域名。这可能是一个稍后加载的文件或用户尝试访问的链接目标。
导航和资源时间: 导航计时是衡量浏览器文档导航事件的指标。资源计时是关于应用程序资源加载的详细网络计时测量。两者都提供相同的只读属性，但导航计时测量主文档的计时，而资源计时提供主文档及其请求的资源所调用的所有资产或资源的计时。
优化启动性能: 改善启动性能通常是能实现最高价值的性能优化之一。良好的用户体验包括确保您的应用快速加载。本文提供了编写新应用程序和将应用程序从其他平台移植到 Web 的性能技巧和建议。
关键渲染路径: 关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕像素所经历的步骤序列。优化关键渲染路径可以提升渲染性能。关键渲染路径包括文档对象模型 (DOM)、CSS 对象模型 (CSSOM)、渲染树和布局。
懒加载: 懒加载是一种将资源标识为非阻塞（非关键）并仅在需要时加载这些资源的策略。这是一种缩短关键渲染路径长度的方法，从而减少页面加载时间。
推测性加载: 推测性加载是指在实际访问相关页面之前执行导航操作（例如 DNS 获取、获取资源或渲染文档）的做法，其依据是对用户最可能接下来访问哪些页面的预测。
性能预算: 性能预算是一种防止性能退化的限制。它可以应用于文件、文件类型、页面上加载的所有文件、特定指标（例如，可交互时间）、自定义指标（例如，英雄元素加载时间）或一段时间内的阈值。
性能监控：RUM vs. 合成监控: 合成监控和真实用户监控 (RUM) 是两种用于监控和提供 Web 性能洞察的方法。RUM 和合成监控提供不同的性能视图，并具有各自的优点、良好的用例和缺点。RUM 通常最适合理解长期趋势，而合成监控非常适合回归测试和缓解开发过程中较短期的性能问题。在本文中，我们将定义和比较这两种性能监控方法。
CSS 和 JavaScript 动画性能: 动画对于许多应用程序提供愉悦的用户体验至关重要。实现 Web 动画有多种方法，例如 CSS transitions/animations 或基于 JavaScript 的动画（使用 requestAnimationFrame()）。在本文中，我们将分析基于 CSS 和基于 JavaScript 动画之间的性能差异。
动画性能和帧速率: Web 上的动画可以通过 SVG、JavaScript（包括 <canvas> 和 WebGL）、CSS animation、<video>、动画 GIF，甚至动画 PNG 和其他图像类型来完成。动画 CSS 属性的性能成本可能因属性而异，动画开销大的 CSS 属性可能导致卡顿，因为浏览器难以达到流畅的帧速率。

初学者教程

MDN 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、开发人员工具、最佳实践和不良实践。

Performance APIs

性能 API 是一组用于衡量 Web 应用程序性能的标准。以下页面提供了性能 API 的概述，包括如何使用它们的信息。

高精度计时: 性能 API 允许进行高精度测量，这些测量基于潜在的亚毫秒级分辨率时间，并使用稳定的单调时钟，不受系统时钟偏差或调整的影响。高分辨率计时器对于准确的基准测试是必需的，而不是精度较低且非单调的 Date 时间戳。
长动画帧计时: 长动画帧（LoAF）会影响网站的用户体验。它们可能导致用户界面 (UI) 更新缓慢，从而导致控件似乎无响应，以及卡顿（或不流畅）的动画效果和滚动，从而导致用户沮丧。长动画帧 API 允许开发人员获取有关长动画帧的信息，并更好地了解其根本原因。本文展示了如何使用长动画帧 API。
监控 bfcache 阻止原因: PerformanceNavigationTiming.notRestoredReasons 属性报告了当前文档在导航时被阻止使用 bfcache 的原因。开发人员可以使用此信息来识别需要更新以使其与 bfcache 兼容的页面，从而提升网站性能。
导航计时: 导航计时通过 PerformanceNavigationTiming API 提供与从一个页面导航到另一个页面相关的指标。例如，您可以确定加载或卸载文档所需的时间，或者记录直到 DOM 构造完成并且可以与 DOM 交互所需的时间。
性能数据: Performance API 不提供性能数据分析或可视化。但是，Performance API 与开发人员工具集成良好，其数据通常发送到分析端点和库以记录性能指标，这有助于您评估数据以找到影响用户的性能瓶颈。此页面概述了哪些类型的 Performance API 数据存在、如何收集以及如何访问它们。
资源计时 API: 资源计时允许检索和分析应用程序资源加载的详细网络计时数据。应用程序可以使用计时指标来确定，例如，加载特定资源（如图像或脚本）所需的时间，无论是作为页面加载的一部分隐式加载还是通过 JavaScript 显式加载，例如使用 fetch() API。
服务器计时: Server-Timing 允许服务器将关于请求-响应周期的指标传达给用户代理。您可以收集此信息并以与 Performance API 处理所有其他指标相同的方式对服务器端指标采取行动。
用户计时 API: 使用用户计时 API 的“标记”和“测量”入口类型，使用属于浏览器性能时间线的高精度时间戳创建应用程序特定的时间戳。