Web 性能
Web 性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。Web 性能指站点从加载到可交互和可响应所消耗的时间,以及页面在交互时的流畅度——滚动是否顺滑?按钮能否点击?弹窗能否快速加载和显示、动画是否平滑?Web 性能既包括客观的度量(如加载时间、每秒帧数和到页面可交互的时间),也包括用户的对页面内容加载时间的主观感觉。
站点响应时间越长,越多的用户就会放弃该网站。重要的是尽量缩短加载和响应时间,并添加其他特性来降低延迟:尽快提供尽可能可用且可交互的体验,并异步加载长尾体验部分。
有很多工具、API 和最佳实践帮助我们测量和改进 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 性能:概述
-
Web 性能学习路径概述。从这里开始你的旅程。
- 什么是 Web 性能?
-
本文从一个模块开始,很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群,以及如何使性能成为 Web 开发工作流程的一部分。
- 用户如何看待性能?
-
比网站在毫秒内的响应速度更重要的是,用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中,我们将随着最佳实践来提升用户感知(而不是实际时间)并讨论各种加载指标、动画和响应性指标。
- Web 性能基础
-
除了 HTML、CSS、JavaScript 和媒体文件这些前端组件之外,还有其他导致应用程序变慢,或在主观和客观上使应用程序变快的因素。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素,并提供进阶优化其中每一项性能的链接。
- HTML 性能特性
-
标记的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量,确保使用最佳顺序和属性(包括样式、脚本、媒体和第三方脚本等内容),可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。
- 多媒体:图像与视频
-
Web 性能最容易提升的点通常是媒体优化。基于每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件已成为可能。另外,如从背景视频中删除音轨,可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响,以及确保将影响降至最低的方法。
- CSS 性能特性
-
CSS 对于提高性能来说可能是一个不太重要的优化点,但是某些 CSS 特性对性能的影响比其他特性更大。在该文中,我们将研究一些影响性能的 CSS 属性,并提供样式处理的建议方法,以确保性能不受负面影响。
- JavaScript 性能最佳实践
-
如果正确使用 JavaScript,则可以提供交互式和沉浸式的 Web 体验——否则可能会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践,以确保即使复杂的内容也尽可能地具有高性能。
使用 Performance API
其他文档
- Firefox Profiler 性能特性
- 使用内置分析器进行分析
-
了解如何使用 Firefox 的内置分析器来分析应用程序性能。
术语表
参见
HTML
CSS
- will-change
- GPU v CPU
- 布局测量
- 字体加载最佳实践
JavaScript
API
-
资源提示:dns-prefetch、preconnect、prefetch 和 prerender
标头
- Content-encoding
- HTTP/2
- gZip
- 客户端提示
工具
额外的指标
- 速度指数和感知速度指数
最佳实践
-
内容分发网络(CDN)