网页性能

网页性能是指加载时间和运行时间的客观衡量以及用户感知的体验。网页性能是指网站加载、变得可交互和响应所需的时间，以及用户交互期间内容的流畅程度 - 滚动是否流畅？按钮是否可点击？弹出窗口是否快速加载和显示，以及它们在显示时是否流畅地动画？网页性能包括客观指标，如加载时间、每秒帧数和交互时间，以及主观体验，如内容加载所需时间的感知。

网站响应时间越长，用户放弃网站的可能性就越大。因此，必须尽量减少加载和响应时间，并添加其他功能来隐藏延迟，使体验尽可能快地可用和交互，同时异步加载体验中较长的尾部部分。

有一些工具、API 和最佳实践可以帮助我们衡量和改进网页性能。我们在本节中介绍了它们。

关键性能指南

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

初学者教程

MDN Web 性能学习区包含涵盖性能基础的现代、最新的教程。如果您是性能新手，请从此处开始。

网页性能：简要概述: 网页性能学习路径概述。从这里开始你的旅程。
什么是网页性能？: 本文从深入了解性能的真正含义开始本模块 - 这包括在考虑性能时需要考虑的工具、指标、API、网络和人员群体，以及如何使性能成为我们 Web 开发工作流程的一部分。
用户如何感知性能？: 比你的网站以毫秒为单位的速度更重要的是，你的用户认为你的网站速度有多快。这些感知受到实际页面加载时间、空闲时间、对用户交互的响应能力以及滚动和其他动画的流畅度的影响。在本文中，我们讨论了各种加载指标、动画和响应能力指标，以及改进用户感知（即使不是实际计时）的最佳实践。
网页性能基础: 除了 HTML、CSS、JavaScript 和媒体文件的前端组件之外，还有一些功能会使应用程序变慢，还有一些功能会使应用程序在主观和客观上更快。有许多与网页性能相关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍许多这些功能及其基本级别，并提供链接到更深入的介绍，以改进每个主题的性能。
HTML 性能特性: 某些属性以及标记的源顺序会影响网站的性能。通过最小化 DOM 节点数，确保为包含内容（如样式、脚本、媒体和第三方脚本）使用最佳顺序和属性，可以极大地改善用户体验。本文详细介绍了如何使用 HTML 来确保最大性能。
多媒体：图像和视频: 网页性能中最容易实现的改进通常是媒体优化。可以根据每个用户代理的功能、大小和像素密度提供不同的媒体文件。其他提示（例如从背景视频中删除音频轨道）可以进一步提高性能。在本文中，我们讨论了视频、音频和图像内容对性能的影响，以及确保这种影响尽可能小的方法。
CSS 性能特性: CSS 可能是为了提高性能而优化的一个不太重要的关注点，但有些 CSS 特性对性能的影响大于其他特性。在本文中，我们查看了一些影响性能的 CSS 属性，并建议了一些处理样式的方法，以确保性能不受负面影响。
JavaScript 性能最佳实践: JavaScript 如果使用得当，可以提供交互式和沉浸式的 Web 体验 - 或者它会严重损害下载时间、渲染时间、应用程序内性能、电池寿命和用户体验。本文概述了一些应考虑的 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能地提高性能。