广泛部署的技术

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

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

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

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

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

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

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

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

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

特性规范 / 小组成熟度现有实现
选择浏览器…
计时 API高解析度时间 (High Resolution Time)
Web 性能工作组 (Web Performance Working Group)
REC
性能时间线 (Performance Timeline)
Web 性能工作组 (Web Performance Working Group)
REC

导航计时 (Navigation Timing)
Web 性能工作组 (Web Performance Working Group)
REC
资源计时第一版 (Resource Timing Level 1)
Web 性能工作组 (Web Performance Working Group)
CR
用户计时 (User Timing)
Web 性能工作组 (Web Performance Working Group)
REC
页面可见性检测页面可见性 (Page Visibility (Second Edition))
Web 性能工作组 (Web Performance Working Group)
REC
本地优先级处理后台任务协同调度 (Cooperative Scheduling of Background Tasks)
Web 性能工作组 (Web Performance Working Group)
PR
动画优化HTML 5.2中的requestAnimationFrame
Web 平台工作组 (Web Platform Working Group)
REC
滚动优化DOM Standard中的被动事件监听器 (Passive event listeners in DOM Standard)
Web 超文本应用技术工作小组 (WHATWG)
LS
线程HTML (Living Standard)中的Web workers
Web 超文本应用技术工作小组 (WHATWG)
LS
优化最佳实践移动 Web 应用最佳实践 (Mobile Web Application Best Practices)
Mobile Web Best Practices Working Group
REC

开发中的技术

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

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

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

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

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

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

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

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

特性规范 / 小组成熟度现有实现
选择浏览器…
网络优先级资源提示 (Resource Hints)
Web 性能工作组 (Web Performance Working Group)
WD
预加载 (Preload)
Web 性能工作组 (Web Performance Working Group)
CR
缓存Service Workers 1
Service Workers Working Group
WD
电池状态电池状态 API (Battery Status API)
设备与传感器工作组 (Device and Sensors Working Group)
CR
计时 API服务器计时 (Server Timing)
Web 性能工作组 (Web Performance Working Group)
WD

长任务 API 第一版 (Long Tasks API 1)
Web 性能工作组 (Web Performance Working Group)
WD

绘制计时第一版 (Paint Timing 1)
Web 性能工作组 (Web Performance Working Group)
WD
底层字节码格式Web 汇编 (WebAssembly)
WebAssembly Working Group
ED
无限滚动交叉观察器 (Intersection Observer)
Web 平台工作组 (Web Platform Working Group)
WD

探索性工作

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

特性规范 / 小组实现意向
选择浏览器…
渲染性能帧计时 (Frame Timing)
Web 性能工作组 (Web Performance Working Group)

目前尚未覆盖的工作

更加精细的网络优化
现有指定资源获取优先级的机制是非常粗糙的,比如 preload 链接类型。应用可以从指定用户代理最终需要获取的资源的相对优先级的声明性机制中获益。Web平台孵化社区组目前的讨论可能存在这个领域的探索性工作。