广泛部署的技术

Web 性能工作组开发了一些规范,它们向 Web 应用提供计时 API,用于分析各任务耗费的时间。

高解析度时间将单调的亚毫秒级解析度时钟 API 提供给Web应用,以便 Web 应用可以精确地测量两个事件之间的时间间隔。性能时间线定义了一个统一的界面来存储和检索性能指标数据。单独的性能指标接口在 Timing Entry Names Registry 中列出并在不同的规范中定义:

  • 导航计时提供导航和元素相关的计时信息;
  • 资源计时提供文档中资源的计时信息;
  • 用户计时帮助应用程序使用高解析度时间戳测量性能。

用于确定是否正在显示网页的页面可见性API也可用于使资源的使用适应 Web 应用的需要,例如通过在页面最小化时减少网络活动。

后台任务协同调度规范定义了 requestIdleCallback 方法,该方法允许在应用未处理其他操作的下一个机会中调度操作。

WebAssembly 是一种低级别的字节码格式,它在网络浏览器中可以以接近本机的速度运行,并支持从C/C++和其他语言进行编译。它还定义了一个试图最大限度地提高性能的执行环境,并与 JavaScript 和 Web 进行良性合作,确保各种实现的安全性和行为一致性。

CSS 的 contain 属性可以指示某个元素的子树独立于页面的其余部分。这让用户代理能够进行大量优化,尤其是跳过屏幕外已知不会影响屏幕上内容呈现的部分。

基于脚本的动画时间控制 API 可以帮助减少播放动画时的资源使用量。

平滑的滚动性能对于 Web 上出色的用户体验至关重要,尤其是在触屏设备上。通过事件监听器的 passive 选项,开发人员可以预先声明事件监听器不会在事件上调用preventDefault(),从而允许浏览器在执行与事件相关的默认操作之前不同步等待。在触摸和滚轮事件中,这能够保证滚动的平滑性。注意:默认情况下,某些浏览器会自动在 touchstarttouchmove 上设置 passive 标志。

除了优化资源之外,应用程序的感知反应性也是移动用户体验的一个关键方面。通过 Web Workers 实现的类似于线程的机制允许通过将最耗费资源的操作卸载到后台进程来保持用户界面的响应。

WebDriver规范定义了一个远程控制接口,可以实现外部对用户代理的控制,通常可用于跨多个浏览器(包括移动浏览器)的自动化测试。

移动 Web 应用最佳实践提供有关如何构建可在移动设备上良好运行的 Web 应用的通用建议,并特别考虑优化的需求。

特性规范 / 小组成熟度现有实现
选择浏览器…
计时 APIHigh Resolution Time Level 2
Web 性能工作组 (Web Performance Working Group)
正式推荐标准
性能时间线 (Performance Timeline)
Web 性能工作组 (Web Performance Working Group)
正式推荐标准
Timing Entry Names Registry
Web 性能工作组 (Web Performance Working Group)
工作草案 - informative
导航计时 (Navigation Timing)
Web 性能工作组 (Web Performance Working Group)
正式推荐标准
资源计时第一版 (Resource Timing Level 1)
Web 性能工作组 (Web Performance Working Group)
候选推荐标准
用户计时第二版 (User Timing Level 2)
Web 性能工作组 (Web Performance Working Group)
正式推荐标准
页面可见性检测页面可见性 (Page Visibility (Second Edition))
Web 性能工作组 (Web Performance Working Group)
正式推荐标准
本地优先级处理后台任务协同调度 (Cooperative Scheduling of Background Tasks)
Web 性能工作组 (Web Performance Working Group)
提案推荐标准
底层字节码格式WebAssembly 核心规范 (WebAssembly Core Specification)
WebAssembly 工作组 (WebAssembly Working Group)
提案推荐标准
渲染性能CSS Containment Module Level 1
CSS 工作组 (CSS Working Group)
正式推荐标准
动画优化HTML标准中的requestAnimationFrame (requestAnimationFrame in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
滚动优化DOM 标准中的被动事件监听器 (Passive event listeners in DOM Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
线程HTML标准中的Web workers (Web workers in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
自动化WebDriver
浏览器测试和工具工作组 (Browser Testing and Tools Working Group)
正式推荐标准
优化最佳实践移动 Web 应用最佳实践 (Mobile Web Application Best Practices)
Mobile Web Best Practices Working Group
正式推荐标准 - informative

开发中的技术

资源提示预加载规范使开发人员能够通过延迟下载或执行下载的资源来优化资源的下载。

Service Workers 规范定义了一种机制,允许应用拦截传出的网络请求并直接对其进行响应。应用可以利用这种机制直接实现灵活的缓存逻辑,从而避免了对服务器的冗长请求。

电池状态 API 允许根据移动设备电池中当前可用的电力水平调整资源的使用。请注意,此规范的未来还不确定,因为它有潜在的隐私侵犯用途

服务器计时使服务器能够将有关请求-响应周期的性能指标传达给用户代理,并允许应用根据这些指标来优化应用响应时间。

长任务 API 提供了一种对在长时间内垄断用户界面主线程的长任务的检测机制。

绘制计时规范允许应用程序在页面加载过程中捕捉一系列关键时刻,例如第一次绘制和第一次内容丰富​​的绘制。

为了应用的动画部分确保最佳的性能,Web 开发者可以使用 CSS 的 will-change 属性让浏览器在动画发生之前计算动画。

CSS Animation Worklet API提供了一种使用 JavaScript 创建动画的方法。该API使用户代理可以在专用的线程中运行动画,降低主线程的压力。

在移动设备上使用无限滚动列表(在用户滚动时加载和呈现越来越多的内容)非常常见。这样的列表提供比触摸屏上的分页更好的用户体验。不幸的是,应用程序需要不断地同步轮询 DOM 元素的布局信息来实现这个模式,这是一个性能开销的重要来源。交叉观察器规范定义了一个 API,用于异步观察目标元素与祖先元素或顶层文档视图的交集中的变化,从而提供一种有效的机制来检索实现无限滚动所需的信息。

用户代理可以实现滚动的默认规则,例如滚动链和过度滚动,而 Web 应用可能希望禁用该规则以增强在移动设备上常见的拉动刷新无限滚动等交互范例。这可以通过脚本来实现,但是由于应用需要监听触摸事件而不设置 passive 标志以在需要时覆盖默认行为,因此会对滚动性能产生负面影响。CSS 的 overscroll-behavior 属性在滚动到达边界时引入了对滚动容器行为的控制,允许 Web 应用禁用滚动的默认规则。

WebRTC统计信息API标识定义了一组 Web IDL 对象,允许访问有关 RTCPeerConnection 的统计信息,允许 Web 应用监视底层网络和媒体的性能。

特性规范 / 小组成熟度现有实现
选择浏览器…
网络优先级资源提示 (Resource Hints)
Web 性能工作组 (Web Performance Working Group)
工作草案

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:Can I use在 Firefox(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Safari(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 百度浏览器(移动)中已有稳定实现。 来源:Can I use在 Opera(桌面)中已有稳定实现。 来源:Can I use在 QQ浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:Can I use在 UC浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use

已有实验性实现:
在 Microsoft Edge(桌面)中已有实验性实现。 来源:Can I use

预加载 (Preload)
Web 性能工作组 (Web Performance Working Group)
候选推荐标准
缓存Service Workers 1
Service Workers Working Group
候选推荐标准
电池状态电池状态 API (Battery Status API)
设备与传感器工作组 (Devices and Sensors Working Group)
候选推荐标准
计时 API服务器计时 (Server Timing)
Web 性能工作组 (Web Performance Working Group)
工作草案
长任务 API 第一版 (Long Tasks API 1)
Web 性能工作组 (Web Performance Working Group)
工作草案
绘制计时第一版 (Paint Timing 1)
Web 性能工作组 (Web Performance Working Group)
工作草案
渲染性能CSS Will Change Module Level 1
CSS 工作组 (CSS Working Group)
候选推荐标准
动画优化CSS Animation Worklet API
CSS 工作组 (CSS Working Group)
工作草案
无限滚动交叉观察器 (Intersection Observer)
Web 应用工作组 (Web Applications Working Group)
工作草案
滚动优化CSS 过度滚动行为模块第一版 (CSS Overscroll Behavior Module Level 1)
CSS 工作组 (CSS Working Group)
工作草案
实时通讯WebRTC统计信息API标识 (Identifiers for WebRTC's Statistics API)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准

探索性工作

帧计时 API 旨在提供应用在用户设备上运行时获得的每秒帧数的详细信息。

事件计时 API使开发者能够衡量用户交互触发的某些事件的延迟。

元素计时 API 支持监视屏幕上显示大图片或开发者指定的图像元素和文本节点何时显示。

排版不稳定性 API 基于页面上降低用户体验的 HTML 元素的移动让 Web 开发者深入了解其网页的稳定性。

优先级提示规范允许开发人员通知用户代理需要下载的每个资源的优先级,与现有的浏览器加载机制(如preload)互补。

Web 应用本质上是动态的,需要大量的 DOM 操作以呈现丰富的内容,而 DOM 的更新可能导致 jank(页面重绘时的明显延迟),因为渲染时用户交互和 requestAnimationFrame 造成的更新是同步。显示锁提议引入了一个新概念,使开发人员能锁定 DOM 元素及其子树,从而在 DOM 更新时阻止重绘。然后,开发者将能够以异步方式解锁元素,触发修改后子树的重绘,而不会导致页面的其余部分出现 jank。

Web 应用对 JavaScript 在客户端上的执行时间知道的的有限,而如果没有有效收集堆栈样本的能力,应用将被迫使用不精确的分析钩子来检测代码,并可能会显著减慢代码执行速度。JS Self-Profiling API 提议描述了一个用于操作抽样性能分析器的API,该分析器允许应用收集丰富的执行数据,以便以最小的开销收集和分析真实的最终用户环境。

需要运行长任务的应用(例如在加载页面时)需要在快速加载页面(或减少任务执行时间)与快速响应输入之间进行权衡。输入事件的早期检测规范提出了 isInputPending 方法,长时间运行的脚本可以同步调用,而不会浪费时间在其他脚本和事件处理上,以检测是否有未处理的输入事件,这些事件的执行可能会延迟触发。

Web 平台孵化器社区组正在探索添加一个新的 <virtual-scroller> 元素,以避免使用纯 JavaScript 实现无限滚动。浏览器将优先渲染在视口(viewport)中的元素,而不是其他元素。这样能够提高性能,同时仍允许诸如查找、无障碍、导航焦点、片段 URL 导航等特性开箱即用。

特性规范 / 小组实现意向
选择浏览器…
计时 API帧计时 (Frame Timing)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
事件计时 API (Event Timing API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
元素计时 API (Element Timing API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
排版不稳定性 API (Layout Instability API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
网络优先级优先级提示 (Priority Hints)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
DOM更新显示锁 (Display Locking)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
JS 性能JS Self-Profiling API
Web 平台孵化社区组 (Web Platform Incubator Community Group)
反应性输入事件的早期检测 (Early detection of input events)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
无限滚动A built-in virtual scroller for the web platform
Web 平台孵化社区组 (Web Platform Incubator Community Group)