use-modern-browser-apis

使用现代浏览器 API

我们优先使用原生、现代的浏览器 API——它们_标准化、支持广泛且效益显著_——而不是依赖臃肿的外部库或自定义回退方案。在适当情况下，使用这些 API 简化逻辑、提升性能并减小包体积。

理念

• 优先使用浏览器原生功能，而非第三方依赖
• 渐进增强：始终为并非所有客户端都支持的 API 提供合理的回退方案
• 异步且安全：使用基于 Promise 的 API 和安全上下文 API，实现非阻塞、安全的访问

核心且支持广泛的 API

这些 API 稳定、实现广泛，适用于日常应用。

UI 与交互

• Intersection Observer API — 高效检测元素何时进入或离开视口（延迟加载、无限滚动）。
• ResizeObserver API — 响应元素尺寸变化，避免布局抖动。
• PerformanceObserver API — 观测性能指标（真实用户监控／性能洞察）。
• BroadcastChannel API — 在同源的不同标签页之间通信。

导航与视图管理

• View Transitions API — 在 UI 状态之间实现原生、硬件加速的过渡效果。
• URLPattern API — 以声明式方式匹配和解析 URL（有助于实现路由逻辑）。

剪贴板与分享

• Clipboard Async API — 经用户同意后，以非阻塞方式读写剪贴板。
• Web Share API Level 2 — 通过设备原生对话框分享文本、链接和文件。

文件与持久化

• File System Access API — 在获得用户许可后读写本地文件。
• 用于批量选择文件／目录的 File Handle & Directory Picker 扩展。

并发与调度

• Web Locks API — 协调对共享资源的异步访问（避免竞态）。
• Scheduling API — 为非必要工作设置优先级或将其放到后台，以提升响应速度。

Workers 与主线程之外的处理

• Web Workers API — 在主线程之外运行脚本，以处理密集型任务。
• OffscreenCanvas — 在 Worker 中使用 Canvas 渲染，以实现高性能图形和视觉效果。

语音与无障碍

• Web Speech API — 集成语音识别与合成，以提升无障碍体验并实现语音 UI。

高级图形与计算

• WebGPU API — 低层级 GPU 访问能力，可用于高性能渲染和计算负载（许多浏览器均支持，包括 Chromium、新版 Safari 和 Firefox）。

实时通信与网络

• WebRTC — 无需插件即可实现实时点对点音视频通信。

何时使用及如何回退

• 使用前必须进行功能检测：

  if ('clipboard' in navigator) { … }
  

对于支持范围并非普遍的 API（例如 WebGPU），请提供平稳的回退方案（WebGL 或功能降级的 UI）。

始终将用户手势要求（例如分享或使用剪贴板）与权限检查结合起来。

最佳实践

异步优先：优先使用 Promise／async API，避免阻塞 UI。

权限 UI：明确告知用户浏览器何时会请求访问权限（文件、剪贴板、分享）。

关注性能：使用 PerformanceObserver 或 Scheduling API 观测主线程工作并为其设置优先级。

安全上下文：使用 HTTPS；许多 API 需要安全上下文才能运行。

总体原则

将浏览器视为平台来编写代码，而不只是将其视为 JS 引擎。

优先采用原生语义（例如，使用 IntersectionObserver 实现延迟加载，而非手动处理滚动事件）。

如果现代浏览器 API 已能满足需求，就减少外部依赖。

记录 API 用法和回退模式，以便维护并支持跨浏览器运行。