Web API 概览

面试一句话总结:Web API ≠ JavaScript。JS 引擎只负责执行 ECMAScript 规范定义的语言核心(变量、函数、原型、Promise...),而 Web API 是浏览器宿主环境额外注入的对象与方法(window / document / fetch / Worker / localStorage ...)。在 Node.js 等非浏览器环境,绝大多数 Web API 不存在,取而代之的是 Node 的内置模块 (fs / http / Buffer...)。

1. 边界:Web API vs ECMAScript

核心认知:这是面试官最爱挖的"基础陷阱"题。typeof Worker 在浏览器返回 'function',在 Node 中会抛 ReferenceWorker is not defined——因为 Worker 是宿主注入的,不是语言规范。

类别	来源	典型成员	浏览器外是否可用
ECMAScript 核心	语言规范 (TC39)	`Array` / `Promise` / `Proxy` / `Map`	✅ Node / Deno / Bun 全部支持
Web API	浏览器宿主注入	`window` / `document` / `fetch` / `Worker`	❌ 仅浏览器(部分可被 polyfill)
Node 内置	Node 自定义	`fs` / `http` / `Buffer` / `process`	❌ 仅 Node 运行时
Node Web API 兼容	Node 18+ 主动对齐	`fetch` / `WebSocket` / `AbortController`	✅ Node 18+ 已支持

面试加分:Node 18+ 已实现 fetch / WebSocket / AbortController / Blob / FormData 等 Web API,目的就是"前后端运行时统一",这意味着部分 Web API 正在跨端标准化。

1.5 三层关系:Web API ⊃ DOM / BOM

核心澄清:DOM 和 BOM 不是 Web API 的"并列兄弟",而是它的两个子集。把"DOM、BOM、Canvas、Worker" 当作同层概念来对比,是面试中最常见的知识体系错误。

                  Web API (浏览器能力全集)
                  ┌──────────────────────────┐
                  │  fetch / Worker / Canvas  │  ← 其他 Web API
                  │  Storage / Geolocation... │
                  │  ┌──────────┐ ┌──────────┐│
                  │  │   DOM    │ │   BOM    ││  ← 两大子集
                  │  │ 文档模型  │ │ 浏览器模型││
                  │  └──────────┘ └──────────┘│
                  │      ↑              ↑      │
                  │      └─── window ───┘      │  ← 两者交叉点
                  └──────────────────────────┘

概念	是什么	标准化	核心入口	典型成员
Web API	浏览器提供的所有 JS 可调用能力	各 API 各自规范 (W3C / WHATWG)	顶层 `window`	`fetch` / `Worker` / `localStorage` / `Canvas` ...
DOM	HTML/XML 文档的树形结构模型	W3C / WHATWG 标准(1998 起)	`window.document`	`Element` / `Node` / `Event` / `MutationObserver`
BOM	浏览器本身的 JS 接口(非文档部分)	历史无标准,HTML5 才规范部分	`window`	`navigator` / `location` / `history` / `screen`

① 关键澄清:父子包含关系

反直觉点:"DOM、BOM、Canvas、Worker" 不是同层概念。Canvas、Worker 和 DOM 才是同层——它们都是 Web API 的子集。

面试标准回答模板:

"Web API 是一个总称,包含 DOM、BOM、Canvas API、Fetch API、Web Worker 在内的所有浏览器能力。其中 DOM 是文档模型(W3C 标准),BOM 是浏览器模型(原本无统一标准)。两者通过 window 交叉——window.document 既是 BOM 的属性,也是 DOM 的根节点。"

② 为什么 `window` 既属于 BOM 又是 DOM 的入口?

console.log(window.document === document); // true,同一个对象

   window  (BOM 核心,也是全局作用域)
     │
     └── document  (BOM 的属性,DOM 的根)
           │
           ├── html (Element)
           │    ├── head
           │    └── body
           │         └── div ...

记忆口诀:BOM 装"浏览器本身",DOM 装"浏览器里的页面"。window 是"房子",document 是"房子里挂着的画"。

③ 为什么 BOM 长期没有正式标准?

DOM:1998 年起 W3C 严格标准化,跨浏览器一致。
BOM:早期 Netscape / IE 各自实现,无统一标准。HTML5 (2014) 才把 window / location / history 等纳入规范,仍有大量属性是浏览器私有。
影响:DOM 操作"一码通用",BOM 操作往往要写兼容性代码 (如 navigator.userAgent 嗅探)。

④ 面试陷阱题速查

提问	正确答案
`document` 是 BOM 还是 DOM?	两者都是——它是 BOM 的 `window.document` 属性,也是 DOM 的根节点
`console` 是 BOM 还是 Web API?	Web API(非 BOM 也非 DOM),但挂在 `window` 上
`setTimeout` 是 BOM 吗?	是,HTML5 规范明确归属 BOM
`addEventListener` 是 DOM 吗?	是,由 DOM EventTarget 接口提供
`localStorage` 是 BOM 吗?	是,HTML5 BOM 规范的一部分
`fetch` 是 BOM/DOM 吗?	都不是,它属于独立的 Fetch Standard

关键结论:只有 Web API 是"统称",DOM 和 BOM 都是它下面的子集。面试时把三者平级对比,会直接暴露知识体系不完整。

2. 分类速查 (七大功能域)

学习方法:不要死记 API 列表,而是按"解决什么问题"分类,形成功能域级别的认知地图。下表是高频面试考点的全貌,详细 API 见各子章节。

① 网络通信

API	作用	详见
`fetch`	替代 XHR 的现代 HTTP 客户端	请求处理
`WebSocket`	全双工长连接	WebSocket
`EventSource` (SSE)	服务端单向推送	WebSocket
`WebRTC`	浏览器端 P2P 实时音视频	(进阶)
`navigator.sendBeacon`	页面卸载时的可靠埋点	BOM - sendBeacon

② 多线程与性能

API	作用	详见
`Worker` / `SharedWorker` / `ServiceWorker`	浏览器多线程三大角色	Web Worker
`SharedArrayBuffer` + `Atomics`	共享内存 + 原子操作	Web Worker
`requestAnimationFrame`	60Hz 渲染同步	BOM - rAF
`requestIdleCallback`	浏览器空闲时段调度	(进阶)
`MessageChannel`	跨上下文消息通道	BOM - MessageChannel

③ 数据存储

API	作用	详见
`localStorage` / `sessionStorage`	同步 KV(5~10MB)	BOM - Storage
`Cookie`	传统服务端可读存储	BOM - Cookie
`IndexedDB`	浏览器内 NoSQL 事务型数据库	BOM - IndexedDB
`CacheStorage`	Service Worker 的请求缓存	(Service Worker 章节)

④ 设备能力

API	作用	典型场景
`navigator.geolocation`	定位	LBS、外卖
`navigator.mediaDevices` (`getUserMedia`)	摄像头/麦克风	WebRTC、视频会议
`navigator.clipboard`	剪贴板读写	富文本编辑器
`navigator.bluetooth` / `navigator.usb`	蓝牙 / USB	物联网 Web
`Notification`	系统通知	消息推送、后台任务

⑤ 图形与渲染

API	作用	详见
`Canvas 2D`	2D 位图绘制	(图形学章节)
`WebGL` / `WebGL2`	3D 硬件加速	(图形学章节)
`WebGPU`	下一代 GPU API(Vulkan/Metal 抽象)	(进阶)
`OffscreenCanvas`	离屏渲染,可搬到 Worker	(Web Worker 章节)
`IntersectionObserver`	元素可见性观察	BOM - 五大 Observer
`MutationObserver`	DOM 变化观察	BOM - 五大 Observer
`ResizeObserver`	元素尺寸变化观察	BOM - 五大 Observer

⑥ 系统集成

API	作用	典型场景
`ServiceWorker`	独立于页面的网络代理	PWA、离线缓存、后台同步
`Push API`	服务端推送	消息通知、新闻推送
`Page Visibility`	页面可见性	视频自动暂停、节省资源
`History API`	SPA 路由	BOM - History

⑦ 安全与加密

API	作用	典型场景
`crypto.subtle`	浏览器原生加密	端到端加密、签名验证
`Permissions API`	权限查询与请求	优雅处理用户授权
CSP (Content-Security-Policy)	跨站脚本防护	(安全章节)

3. 现代 Web API 的统一异步模型

关键趋势:从 ES2015 起,浏览器新 API 几乎全部 Promise 化,彻底告别回调地狱。

// ❌ 老式回调 API (现已逐步淘汰)
navigator.geolocation.getCurrentPosition(success, error);

// ✅ 现代 Promise 化 API
async function getLoc() {
  // 注意:Geolocation 仍用回调,但新 API 普遍 Promise 化
  const pos = await new Promise((res, rej) =>
    navigator.geolocation.getCurrentPosition(res, rej),
  );
  return { lat: pos.coords.latitude, lng: pos.coords.longitude };
}

Promise 化代表 API:fetch / CacheStorage / IndexedDB (via idb 库) / Web Crypto / Web Locks / Web Share / WebTransport / EyeDropper ...

统一中断机制:AbortController — 现代 Web API 都接受 signal 参数,实现统一的请求取消:

const ctrl = new AbortController();
setTimeout(() => ctrl.abort(), 5000); // 5 秒超时

// fetch / addEventListener / WebSocket.set() 都支持
fetch(url, { signal: ctrl.signal });

面试加分:能用 AbortController 统一管理"用户取消 / 超时 / 页面卸载"三种取消场景,是考察"现代浏览器 API 设计理解"的高频加分项。

4. 安全与权限模型

核心原则:浏览器 Web API 涉及"用户隐私 / 硬件访问"时,必须经过权限授权。这是面试中常被忽视但极重要的考点。

权限等级	触发条件	示例 API
无权限	静默可用	`fetch` (同源) / `localStorage` / `Worker`
静默授权	首次调用时浏览器内部提示	`Notification`
用户手势	必须在 click/touch 事件中调用	`clipboard.writeText` / `audio.play()`
显式弹窗授权	每次调用都需用户同意	`geolocation` / `getUserMedia` / `bluetooth`

// ❌ 静默失败:不在用户手势上下文中调用
document.addEventListener("DOMContentLoaded", () => {
  navigator.clipboard.writeText("hello"); // 报错或静默拒绝
});

// ✅ 必须包在用户事件回调中
button.addEventListener("click", async () => {
  await navigator.clipboard.writeText("hello"); // OK
});

重要安全前提:大多数"危险 API"仅在 HTTPS 下可用(localhost 例外)。这是因为 HTTP 下中间人攻击可以窃取 geolocation 等敏感数据。

5. 经典面试题

① 什么是 Web API?它和 JavaScript 是什么关系?

答:JS 是一门语言,由 ECMAScript 规范定义(变量、函数、对象、Promise 等),由各 JS 引擎(V8 / SpiderMonkey)实现;Web API 是浏览器宿主环境额外提供的能力(window / document / fetch / Worker / canvas 等),不属于语言规范。

判断标准:Node.js 中能用的是语言核心,不能用的是 Web API(document / Worker 在 Node 中都报错)。Node 18+ 主动实现了部分 Web API(fetch / WebSocket / Blob 等),但仍不实现 DOM / Worker 等深度浏览器特性。

② 现代 Web API 共同的异步模式是什么?如何统一取消?

答:Promise 化 + AbortController 统一中断。

几乎所有新增 Web API (fetch / CacheStorage / Web Locks / WebTransport 等) 都返回 Promise 或 Async Iterable。
取消机制统一通过 AbortController.signal 传递:fetch(url, { signal }) / addEventListener('fetch', { signal }) / WebSocket 的 abort 协议等。
优势:可以用一个 controller 取消多个并发的异步操作 (如页面卸载时一键中止所有未完成的 fetch)。

③ 为什么 `navigator.clipboard.writeText` 必须在点击事件里调用?

答:这是浏览器的用户手势 (User Activation) 保护机制——涉及"用户感知副作用"的 API (剪贴板写入、自动播放音频、打开新窗口等) 必须由真实的用户操作触发,防止恶意脚本在用户不知情时滥用。

静默调用会被浏览器静默拒绝 (无报错,只返回 undefined 或 reject)。
首次成功调用后,该页面可能在短期内获得"临时授权",但刷新后失效。
类似的还有 audio.play() / window.open() / requestFullscreen() 等。

④ 如何判断一个 Web API 在我的环境是否可用?

答:四种策略,按推荐度排序:

特性检测 (推荐):'fetch' in window / 'Worker' in window / navigator.clipboard?.writeText — 运行时判断,无副作用。
能力检测:if (navigator.clipboard) / 'IntersectionObserver' in window — 比特性检测更精准。
try/catch 探测:对可能抛错的构造函数 (new Worker(url) / new Image()) 包裹。
❌ UA 嗅探 (navigator.userAgent.indexOf('Chrome')):强烈反对,UA 可被伪造,且每个新浏览器版本都要维护白名单。

最佳实践:结合 navigator.permissions.query() 提前向用户申请权限,避免"调用时才弹窗"打断用户。

1. 边界:Web API vs ECMAScript​

1.5 三层关系:Web API ⊃ DOM / BOM​

① 关键澄清:父子包含关系​

② 为什么 window 既属于 BOM 又是 DOM 的入口?​

③ 为什么 BOM 长期没有正式标准?​

④ 面试陷阱题速查​

2. 分类速查 (七大功能域)​

① 网络通信​

② 多线程与性能​

③ 数据存储​

④ 设备能力​

⑤ 图形与渲染​

⑥ 系统集成​

⑦ 安全与加密​

3. 现代 Web API 的统一异步模型​

4. 安全与权限模型​

5. 经典面试题​

① 什么是 Web API?它和 JavaScript 是什么关系?​

② 现代 Web API 共同的异步模式是什么?如何统一取消?​

③ 为什么 navigator.clipboard.writeText 必须在点击事件里调用?​

④ 如何判断一个 Web API 在我的环境是否可用?​