Polyfill、降级与 Baseline

本节把能力检测、polyfill 和基础降级拆成三条路径。

const supports = 'IntersectionObserver' in globalThis
const strategy = supports ? 'native' : 'fallback'
console.log(strategy)

检测 API 能力后再决定是否加载 polyfill；加载失败时仍显示基础内容，不能用 User-Agent 名称代替运行时能力。

机制拆解

Polyfill 是运行时能力补齐，降级是保留核心结果的替代实现，Baseline 是目标浏览器支持集合；三者分别回答“如何补能力”“没有能力时怎么办”“哪些版本可作为发布基线”。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

在支持与不支持 IntersectionObserver 的环境中分别运行 native、polyfill、fallback 三条路径，记录首屏结果、加载时机和 polyfill 加载失败时的基础内容。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 分别运行 native、polyfill、fallback，记录首屏结果和加载时机。
2. 让 polyfill 请求失败，断言基础内容仍可用。
3. 比较 Baseline、能力检测和 User-Agent 判断的职责。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。