Web 性能

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

站点响应时间越长，越多的用户就会放弃该网站。重要的是尽量缩短加载和响应时间，并添加其他特性来降低延迟：尽快提供尽可能可用且可交互的体验，并异步加载长尾体验部分。

有很多工具、API 和最佳实践帮助我们测量和改进 Web 性能。我们将在本节中介绍：

关键性能指南

CSS 动画与 JavaScript 动画的性能

对众多应用程序而言，动画对提供友好的用户体验有着关键的作用。我们有很多方式生成 web 动画，比如 CSS transition 和 animation 或者基于 JavaScript 的动画（使用 Window.requestAnimationFrame）。在这篇文章中，我们分析 CSS 动画和 JavaScript 动画的性能差异。

Web 性能计时推荐：多久才算太久？

对于加载页面时速度缓慢的定义并不明确，但有一些具体的指导方针：在 1 秒内加载内容、在 50 毫秒内释放线程、在 16.7 毫秒内渲染一帧动画、在 50 至 200 毫秒内响应用户输入。

优化启动性能

一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。

使用 dns-prefetch

DNS-prefetch 尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。

关键渲染路径

关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了文档对象模型（DOM）、CSS 对象模型（CSSOM）、渲染树和布局。

懒加载

延迟加载（懒加载）是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。

渲染页面：浏览器的工作原理

在浏览网页时用户希望页面的内容能够快速加载且流畅交互。因此，开发者应力争实现这两个目标。

初学者教程

MDN Web 性能学习专区有着涵盖性能要素的最新教程。如果你是性能方面的新手，请从这里开始：

Web 性能：概述

Web 性能学习路径概述。从这里开始你的旅程。

什么是 Web 性能？

本文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。

用户如何看待性能？

比网站在毫秒内的响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳实践来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。

Web 性能基础

除了 HTML、CSS、JavaScript 和媒体文件这些前端组件之外，还有其他导致应用程序变慢，或在主观和客观上使应用程序变快的因素。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。

HTML 性能特性

标记的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性（包括样式、脚本、媒体和第三方脚本等内容），可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。

多媒体：图像与视频

Web 性能最容易提升的点通常是媒体优化。基于每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件已成为可能。另外，如从背景视频中删除音轨，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保将影响降至最低的方法。

CSS 性能特性

CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。

JavaScript 性能最佳实践

如果正确使用 JavaScript，则可以提供交互式和沉浸式的 Web 体验——否则可能会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。

使用 Performance API

资源计时 API

资源加载并计时这些资源的加载，包括管理资源缓冲区和应对 CORS。

用户计时 API

使用用户计时 API 的“标记”和“度量”条目类型（它们是浏览器性能时间轴的一部分）创建特定于应用程序的时间戳。

信标 API

使用信标接口调度发送给 Web 服务器的异步非阻塞请求。

交叉观察器 API

通过交叉观察器 API 学习对元素可见性的监测，并在关注的元素变得可见时接收异步通知。

其他文档

Firefox Profiler 性能特性

网站提供了如何使用和理解开发者工具中的性能特性的信息，包括调用树、火焰图、栈图、标记图和网络图。

使用内置分析器进行分析

了解如何使用 Firefox 的内置分析器来分析应用程序性能。

术语表

参见

HTML

CSS

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

JavaScript

API

标头

工具

额外的指标

  • 速度指数和感知速度指数

最佳实践