Web 性能

翻译不完整。 请帮助我们翻译这篇文章!

Web 性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间,以及页面在交互时的流畅度——滚动是否顺滑?按钮能否点击?弹窗能否快速打开,动画是否平滑?Web 性能既包括客观的度量如加载时间,每秒帧数和到页面可交互的时间;也包括用户的对页面内容加载时间的主观感觉。 

页面响应时间越长,越多的用户就会放弃该网站。重要的是,通过使体验尽可能早地变得可用和交互,同时异步地加载长尾体验部分,来最大程度地减少加载和响应时间,并添加其他功能以降低延迟。

有很多工具,API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。

关键性能指南

CSS and JavaScript animation performance
Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.
dns-prefetch
当浏览器从第三方服务跨域请求资源的时候,在浏览器发起请求之前,这个第三方的跨域域名需要被解析为一个IP地址,这个过程就是DNS解析,DNS缓存可以用来减少这个过程的耗时,DNS解析可能会增加请求的延迟,对于那些需要请求许多第三方的资源的网站而言,DNS解析的耗时延迟可能会大大降低网页加载性能。
优化启动性能
不论在什么平台上,尽可能地启动总是一个好主意。因为这是个很宽泛的问题,在这里我们不会着重关注。相反我们会关注构建 Web 应用时更重要的一个问题:尽可能异步地启动。这意味着不要将你所有的启动代码在应用主线程中的唯一一个事件处理函数中运行。
关键渲染路径
关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM),CSS Object Model (CSSOM),渲染树和布局。
渲染页面:浏览器的工作原理
了解如何提升性能和感知性能,有助于了解浏览器的工作原理。

初学者教程

MDN Web 性能学习专区 有着涵盖性能要素的最新教程。 如果您是性能新手,请从这里开始:

Web 性能:概述
Web性能学习路径概述。 在这里开始您的旅程。
什么是 Web 性能?
该文从一个模块开始,很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群,以及如何使性能成为 Web 开发工作流程的一部分。
用户如何看待性能?
比网站在毫秒内响应速度更重要的是,用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中,我们将随着最佳练习来提升用户感知(而不是实际时间)并讨论各种加载指标、动画和响应性指标。
Web 性能基础
除了HTML,CSS,JavaScript和媒体文件这些前端模块之外,还有其他影响Web性能的因素,它们可能会导致应用程序变慢,或在主观和客观上使应用程序变快。有许多与Web性能相关的API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素,并提供进阶优化其中每一项性能的链接。
HTML 性能特性
标签的某些属性和顺序可能会影响网站性能。 通过最大程度地减少DOM节点的数量,确保使用最佳顺序和属性,包括样式、脚本、媒体和第三方脚本等内容,可以大大改善用户体验。 该文详细介绍了如何使用 HTML 来确保最佳性能。
多媒体:图像与视频
Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外,如从背景图像中删除音频轨迹,可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响,以及确保影响尽可能小的方法。
CSS 性能特性
CSS 对于提高性能来说可能是一个不太重要的优化点,但是某些 CSS 特性对性能的影响比其他特性更大。在该文中,我们将研究一些影响性能的 CSS 属性,并提供样式处理的建议方法,以确保性能不受负面影响。
JavaScript 性能最佳实践
如果正确使用JavaScript,则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。 该文概述了一些值得思考的 JavaScript 最佳实践,以确保即使复杂的内容也尽可能地具有高性能。
移动端性能
随着移动设备上的Web访问普及,并且所有移动平台都具有功能完善的Web浏览器,但由于受限于带宽、CPU、电池续航等因素,因此考虑这些平台上Web内容的性能非常重要。 本文着眼于特定于移动设备的性能注意事项。

使用 Performance API

Performance API
该指南介绍了如何使用 High-Resolution Time 标准中定义的 Performance 接口。
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
PerformanceFrameTiming 接口提供有关浏览器事件循环的计时数据。
Beacon API
使用 Beacon 接口调度发送给服务器的异步非阻塞请求。
Intersection Observer API
通过 Intersection Observer API 学习对元素可见性的监测,并在关注的元素变得可见时被异步通知。

其他文档

开发者工具中与性能相关的功能
This section provides information on how to use and understand the performance features in your developer tools, including Waterfall, Call Tree, and Flame Charts.
使用内置分析器进行分析
了解如何使用Firefox的内置分析器来分析应用程序性能。

各种术语

即将编写的文档

JavaScript 性能最佳实践
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.
移动端性能
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.
Web 字体性能
An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.
性能瓶颈
理解带宽
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.
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.
Alternative media formats
When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.
分析 JavaScript bundle
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.
延迟加载
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.
使用动态 import 延迟加载 JavaScript
When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.
使用资源提示(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.
性能预算
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 性能检查清单
一个在开发应用程序时要考虑性能清单,其中包含如何实现每个特性的教程链接,包括 Service Worker、性能问题诊断、字体加载最佳实践、客户端提示、创建高效的动画等。
Mobile 性能检查清单
A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.

也可以看看

HTML

CSS

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

JavaScript

APIs

Headers

工具

其他指标

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

最佳实践