用途
该技能用于指导在 Web 开发中优先采用现代浏览器原生 API，替代通过 JavaScript 手动实现的功能或重型外部库。其目标是利用标准化、广泛支持且高杠杆的原生能力，简化逻辑、提升性能并减小打包体积。
核心理念
- 优先使用浏览器原生能力，而非第三方依赖。
- 渐进增强：对并非所有客户端都支持的 API，始终提供合理的降级方案。
- 异步与安全：使用基于 Promise 的 API 和安全上下文 API，实现非阻塞、安全的访问。
主要能力（按类别）
UI 与交互
- Intersection Observer API：高效检测元素进入/离开视口（懒加载、无限滚动）。
- ResizeObserver API：响应元素尺寸变化，避免布局抖动。
- PerformanceObserver API：观察性能指标（RUM/性能洞察）。
- 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：对非必要工作进行优先级排序或后台处理，提升响应性。
Worker 与主线程外执行
- 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/异步 API，避免阻塞 UI。
- 权限 UI：当浏览器将请求访问（文件、剪贴板、分享）时，向用户清晰传达。
- 性能意识：使用 PerformanceObserver 或 Scheduling API 观察并优先处理主线程工作。
- 安全上下文：使用 HTTPS；许多 API 需要安全上下文才能运行。
一般原则
- 将浏览器视为平台来编写代码，而不仅仅是 JS 引擎。
- 优先使用原生语义（例如通过 IntersectionObserver 实现懒加载，而非手动滚动处理程序）。
- 在现代浏览器 API 足够时，减少外部依赖。
- 记录 API 用法和降级模式，以便维护和跨浏览器支持。
适用场景
适用于需要实现懒加载、无限滚动、跨标签页通信、视图过渡、剪贴板操作、文件读写、并发控制、后台任务、语音交互、高性能图形渲染或实时音视频通信等功能的 Web 前端开发场景。
限制
资料未提供具体浏览器兼容性版本、各 API 的详细参数说明、完整代码示例或性能基准数据。部分 API（如 WebGPU）并非所有浏览器都支持，需提供降级方案。许多 API 需要安全上下文（HTTPS）和用户手势或权限授权。