Web 性能

CSS 动画与 JavaScript 动画的性能

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

优化启动性能

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

使用 dns-prefetch

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

关键渲染路径

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

懒加载

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

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

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

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

Web 性能：概述 (en-US)

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

该指南介绍了如何使用 High-Resolution Time 标准中定义的 Performance 接口。

Resource Timing API

资源加载和定时加载这些资源，包括管理资源缓冲区和处理 CORS

User Timing API

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

Beacon API (en-US)

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

Intersection Observer API (en-US)

通过 Intersection Observer API 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。

开发者工具中与性能相关的功能

本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 Waterfall、Call Tree 和 Flame Charts (en-US)。

使用内置分析器进行分析

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

• Beacon (en-US)
• Brotli 压缩
• 客户端提示 (en-US)
• 代码拆分
• CSSOM
• 域名分片
• 有效连接类型 (en-US)
• 首次内容绘制
• 首次 CPU 空闲 (en-US)
• 首次输入延迟 (en-US)
• 首次交互 (en-US)
• 首次有效绘制
• 首次绘制
• HTTP
• HTTP/2
• 卡顿（Jank）
• 延迟
• 懒加载 (en-US)
• 长任务 (en-US)
• 无损压缩 (en-US)
• 有损压缩 (en-US)
• 主线程
• 代码缩减 (en-US)
• 网络节流 (en-US)
• 包 (en-US)
• 页面加载时间 (en-US)
• 页面预测 (en-US)
• 解析
• 感知性能 (en-US)
• Prefetch
• Prerender (en-US)
• QUIC (en-US)
• RAIL
• 真实用户监控 (en-US)
• Resource Timing (en-US)
• 来回通讯延迟（RTT） (en-US)
• Server Timing (en-US)
• Speculative parsing
• 速度指标 (en-US)
• SSL
• 综合监控 (en-US)
• TCP 握手 (en-US)
• TCP 慢开始
• 第一字节时间
• 可交互时间 (en-US)
• TLS
• 传输控制协议（TCP）
• 摇树（Tree shaking）
• Web 性能 (en-US)

HTML

• <picture> 元素
• <video> 元素
• <source> 元素
• <img> srcset 属性
  • 响应式图片
• 使用 rel="preload" 以预加载内容——https://w3c.github.io/preload/

CSS

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

JavaScript

• DOMContentLoaded
• 垃圾回收（GC）
• requestAnimationFrame

API

• Performance API
• Navigation Timing API
• Media Capabilities API (en-US)
• Network Information API
• PerformanceNavigationTiming
• Battery Status API
• Navigator.deviceMemory
• Intersection Observer
• 使用 User Timing API
• Long Tasks API
• High Resolution Timing API（https://w3c.github.io/hr-time/)）
• Resource Timing API
• Page Visibility
• 基于 Background Tasks API 的后台任务调度
  • requestIdleCallback()
• Beacon API
• Resource Hints - dns-prefetch, preconnect, prefetch, and prerender
• FetchEvent.preloadResponse (en-US)
• Performance Server Timing API (en-US)

标头

• Content-encoding
• HTTP/2
• gZip
• 客户端提示

工具

• 开发者工具中的性能工具

额外的指标

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

最佳实践

• 使用 Service Worker
• 使用 Web Worker
  • Web Worker API
• PWA
• 缓存
• 内容分发网络（CDN）