网络性能

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

¥Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.

网站响应时间越长，放弃该网站的用户就越多。重要的是要最大限度地减少加载和响应时间，并添加额外的功能来隐藏延迟，方法是尽快使体验尽可能可用和交互，同时异步加载体验的较长尾部部分。

¥The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.

有一些工具、API 和最佳实践可以帮助我们衡量和提高 Web 性能。我们在本节中介绍它们：

¥There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section:

关键性能指南

¥Key performance guides

Animation performance and frame rate: Animation on the web can be done via SVGAnimationElement, window.requestAnimationFrame, including canvas and WebGL_API, CSS animation, video, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in jank as the browser struggles to hit a smooth FPS.
Critical rendering path: The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.
CSS and JavaScript animation performance: Animations are critical for a pleasurable user experience on many applications. There are many ways to implement web animations, such as CSS transition/animation or JavaScript-based animations (using Window.requestAnimationFrame). In this article, we analyze the performance differences between CSS-based and JavaScript-based animation.
Lazy loading: Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
Navigation and resource timings: Navigation timings are metrics measuring a browser's document navigation events. Resource timings are detailed network timing measurements regarding the loading of an application's resources. Both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources.
Optimizing startup performance: Improving your startup performance is often one of the highest value performance optimizations that can be made. How long does your app take to start up? Does it seem to lock up the device or the user's browser while the app loads? That makes users worry that your application has crashed, or that something else is wrong. Good user experience includes ensuring your app loads quickly. This article provides performance tips and suggestions for both writing new applications and porting applications to the web from other platforms.
Performance budgets: A performance budget is a limit to prevent regressions. It can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. Time to Interactive), a custom metric (e.g. Time to Hero Element), or a threshold over a period of time.
Performance fundamentals: Performance means efficiency. In the context of Open Web Apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
Performance Monitoring: RUM vs. synthetic monitoring: Synthetic monitoring and real user monitoring (RUM) are two approaches for monitoring and providing insight into web performance. RUM and synthetic monitoring provide for different views of performance and have benefits, good use cases and shortfalls. RUM is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development. In this article we define and compare these two performance monitoring approaches.
Populating the page: how browsers work: Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.
Recommended Web Performance Timings: How long is too long?: There are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7ms) and responding to user input (50 to 200ms).
Speculative loading: Speculative loading refers to the practice of performing navigation actions (such as DNS fetching, fetching resources, or rendering documents) before the associated pages are actually visited, based on predictions as to what pages the user is most likely to visit next.
Understanding latency: Latency is the time it takes for a packet of data to travel from source to a destination. In terms of performance optimization, it's important to optimize to reduce causes of latency and to test site performance emulating high latency to optimize for users with lousy connections. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.
Using dns-prefetch: DNS-prefetch is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow.

初学者教程

¥Beginner's tutorials

MDN Web 性能学习区包含涵盖性能要点的现代最新教程。如果你是性能新手，请从这里开始：

¥The MDN Web Performance Learning Area contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:

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