Web 性能

翻译正在进行中。

网页性能包括对加载时间和运行时间客观度量和用户直观感觉。网页性能指页面加载、到可交互和可响应所消耗的时间以及页面在交互时的流畅度——滚动是否顺滑?按钮可以点击?弹窗是否能够快速打开并且过渡的像预期的那样顺畅?网页性能既包括客观的度量如加载时间,每秒帧数和到页面可交互的时间;也包括用户的对页面内容加载时间的主观感觉。

页面加载到响应使用的时间越长,越多的用户就会放弃该网站。减少加载和响应时间是很重要的,添加额外的特征去减少延时通过尽可能快的尽可能快的使页面获得和响应,当异步加载能优化加载时常的体验的时候。

有很多工具,API 和好的实践帮助我们处理和改进网页性能。本章对此有所讲解。

在这一节中

优化启动性能
不论在什么平台上,尽可能地启动总是一个好主意。因为这是个很宽泛的问题,在这里我们不会着重关注。相反我们会关注构建 Web 应用时更重要的一个问题:尽可能异步地启动。这意味着不要将你所有的启动代码在应用主线程中的唯一一个事件处理函数中运行。

精选教程

The MDN Web Performance Learning Area contains modern, up-to-date tutorials covering Performance essentials:

什么是 Web 性能
This article starts the module off with a good look at what Performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make Performance part of our web development workflow.
Web 性能基础
In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic.
用户如何看待性能?
More important than how fast your website is in milliseconds, is how fast do your users perceive your site to be. Page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations impact these perceptions. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings themselves.
多媒体:图像与视频
Frequently, media optimization is the lowest hanging fruit of web performance. Serving different media files based on each user agent's capability, size and pixel density is possible. Additional tips, like removing audio tracks from background images, can improve performance even further. In this article, we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.
CSS 性能特性
CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article, we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.

使用 Performance API

Performance API
This guide describes how to use the Performance interfaces that are defined in the High-Resolution Time standard.
Resource Timing API
Resource loading and timing the loading of those resources, including managing the resource buffer and coping with CORS
性能时间线
The Performance Timeline standard defines extensions to the Performance interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.
User Timing API
Create application specific timestamps using the user timing API's "mark" and "measure" entry types - that are part of the browser's performance timeline.
Frame Timing API
The PerformanceFrameTiming interface provides frame timing data about the browser's event loop.
Beacon API
The Beacon interface schedules an asynchronous and non-blocking request to a web server.
Intersection Observer API
Learn to time element visibility with the Intersection Observer API and be asynchronously notified when elements of interest becomes visible.

其他文档

开发者工具中与性能相关的功能
This section provides information on how to use and understand the performance features in your developer tools, including Waterfall, Call Tree, and Flame Charts.
理解延迟
Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.

各种术语

即将编写的文档

JavaScript performance best practices
JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.
Mobile performance
With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.
Performance bottlenecks
Understanding bandwidth
Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth.
HTTP/2 and you

The transport layer—that is, HTTP—is utterly essential to the functioning of the web, and it has only been relatively recently that it has seen a major update in the form of HTTP/2. Out of the box, HTTP/2 provides many performance improvements and advantages over it's predecessor, but it also changes the landscape. In this article, you'll learn what HTTP/2 does for you, and how to fine-tune your application to make it do go even further.

The role of TLS in performance

TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.

Reading performance charts
Developer tools provide information on performance, memory, and network requests. Knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools.
Analyzing JavaScript bundles
No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know what you're using, as well how to detect if your app contains duplicated scripts between bundles.
Lazy loading
It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.
Lazy-loading JavaScript with import()
The term "lazy loading" often refers to load deferment techniques for assets not needed at load such as loading below-the-fold imagery only when those images scroll into the view. Now there are native features to load JavaScript! In this guide, we'll talk about the dynamic import() statement, a newer browser feature, that loads a JavaScript module on demand.
Controlling resource delivery with resource hints
Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.
Performance Budgets
Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget.
Web performance checklist
A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.
Mobile performance checklist
A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.

App 性能

Performance fundamentals
A wide overview of Web application performance, what it is, how the browser helps to improve it, and what tools and processes you can use to test and further improve it.
Optimizing startup performance
Tips and suggestions to help you improve start-up performance, both when writing a new app and when porting an app from another platform to the Web.
Profiling with the built-in profiler
Learn how to profile app performance with Firefox's built-in profiler.
CSS and JavaScript animation performance
Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS- and JavaScript-based animations.

View all articles about performance...

也可以看看

HTML

CSS

  • will-change
  • GPU 与 CPU
  • 测量布局
  • 字体加载的最佳实践

JavaScript

APIs

Headers

工具

其他指标

  • 速度指数(Speed Index)和感知速度指数(Perceptual Speed Index)

最佳实践

下面是本页的旧页面内容。经过完整翻译,暂待与最新内容合并,暂时保留。

原内容:

主要教程

MDN 里的 Web 性能学习范围有覆盖了性能要素的当前最新教程:

什么是网页性能
本文在开始这个模块的时候很好的解释了性能实际是什么——包含了工具,衡量标准,APIs,网络,以及当我们在考虑性能是要考虑到的人群和我们怎样把性能变成我们开发工作流的一部分。
HTML 性能点
部分属性跟标记的源顺序会影响性能或网站。通过DOM节点数最小化、确保引用的内容例如样式、脚本、媒体文件以及第三方脚本里使用最优的顺序及属性就能显著提高用户体验。本文详细的展示了如何使用HTML以确保最大的性能。
JavaScript 性能最佳实践
Javascript如果合理使用可以提供交互式和沉浸式的web体验……否则将会严重损害下载时间、渲染时间、应用性能、电池寿命和用户体验。本文概述了一些值得思考的javascript最佳练习,以确保即使在复杂的上下文里也尽可能保证性能。
多媒体:图片和视频
web性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外,如从背景图像中删除音频轨迹,可进一步提升性能。本文讨论视频、音频和图像内容对性能的影响,以及确保影响尽可能小的方法。
高级 CSS 性能点
css对于提高性能来说可能是一个不太重要的优化点,但是某些css特性对性能的影响比其他特性更大。在本文中,我们将研究一些影响性能的css属性,并提供样式处理的建议方法,以确保性能不受负面影响。
用户如何看待性能?
比网站在毫秒内响应速度更重要的是,用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中,我们将随着最佳练习来提升用户感知(而不是实际时间)并讨论各种加载指标、动画和响应性指标。
网页性能基础
In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.
移动端性能
With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.
填充页面
An HTTP request is made and, hopefully, a few seconds later, the site appears. Displaying the content involves executing JavaScript, possibly modifying the DOM, calculating styles, calculating layout, and finally rendering the content, which involves painting and compositing, and can involve GPU acceleration on a separate thread.
性能瓶颈
了解延迟
Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, and how to measure and improve latency.
了解带宽
Bandwidth is the amount of data (measured in Mbps or Kbps) that can be sent per second. This article explains the role of bandwidth in media-rich internet applications, how it can be measured, and how you can optimize applications to make the best use of available bandwidth.
HTTP/2 和你
The transport layer—that is, HTTP—is utterly essential to the functioning of the web, and it has only been relatively recently that it has seen a major update in the form of HTTP/2. Out of the box, HTTP/2 provides many performance improvements and advantages over its predecessor, but it also changes the landscape. In this article, you'll learn what HTTP/2 does for you, and how to fine-tune your application to make it do go even further.
TLS 在性能中的作用
TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.
阅读性能图表
Developer tools provide information on performance, memory, and network requests. Knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools.
分析 JavaScript 捆绑包
毫无疑问,JavaScript 占据了现代网页开发的大部分。While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know what you're using, as well how to detect if there are duplicated scripts between bundles in your app.
延迟加载
It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is defering the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time – when those assets are actually needed.
使用 import() 延迟加载 JavaScript
The term "lazy loading" often refers to load deferment techniques for assets not needed at load such as loading below-the-fold imagery only when those images scroll into the view. Now there are native features to load JavaScript! In this guide, we'll talk about the dynamic import() statement, a newer browser feature, that loads a JavaScript module on demand.
使用资源提示控制资源交付
Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.

其它文档

有关性能的业务案例

You know web performance is important, but how do you convince clients and management to invest in performance and make it a priority. In this article, we'll discuss creating a clear business case to convince decision-makers to make the investment.

性能预算
Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is often helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget.
移动端性能检查表
A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.
启动性能优化
How long does your app take to start up? Does it lock up the browser while loading? Take the time to ensure your app starts up nicely. This article offers tips and suggestions to help you achieve that goal
开发者工具性能特征
This section provides information on how to use and understand the performance features in your developer tools, including Waterfall, Call Tree, and Flame Charts.
了解延迟
Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, and how to measure and improve latency.
网页性能检查表
A performance checklist of features to consider when developing applications with links to tutorials on how to implement each features, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.

App 性能

性能基础
A wide overview of Web application performance, what it is, how the browser helps to improve it, and what tools and processes you can use to test and further improve it.
优化启动性能
Tips and suggestions to help you improve startup performance, both when writing a new app and when porting an app from another platform to the Web.
使用内置分析器进行分析
Learn how to profile app performance with Firefox's built-in profiler.
CSS 和 JavaScript 动画性能
Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS- and JavaScript-based animations.

查看有关性能的全部文章……