特性检测与渐进增强

特性检测与渐进增强

机制拆解

特性检测的结果必须改变业务路径，而不是只打印一个布尔值。下面页面在支持 IntersectionObserver 时懒加载图片，否则直接加载同一张图片，保证两条路径都有可见结果：

<img id="photo" width="320" height="180" alt="示例图片">
<script>
  const image = document.querySelector('#photo')
  const source = 'photo.jpg'
  const load = () => { image.src = source; image.dataset.strategy = 'eager' }
  if ('IntersectionObserver' in globalThis) {
    const observer = new IntersectionObserver(([entry], current) => {
      if (!entry.isIntersecting) return
      load()
      current.disconnect()
    })
    image.dataset.strategy = 'observer'
    observer.observe(image)
  } else {
    load()
  }
</script>

在支持浏览器中滚动到图片并记录 data-strategy；在 DevTools 中关闭脚本或用不支持的浏览器模拟降级，确认图片仍能加载。检测能力，不检测浏览器名称。

边界与失败路径

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

可运行实验

准备一个可加载的 photo.jpg，分别在支持 IntersectionObserver 的浏览器和禁用该 API 的环境中运行示例。记录图片的 data-strategy、网络请求时机和最终可见结果；两条路径都必须显示图片，只允许加载时机不同。

实验记录要注明如何制造“不支持”路径（删除能力或使用目标浏览器），不要把改 User-Agent 当作能力检测。

练习

1. 删除 IntersectionObserver 分支中的 load()，预测支持浏览器中的可见结果，并写出回归断言。
2. 把检测改成浏览器名称判断，列举一个名称相同但能力不同的风险，说明为什么能力检测更可靠。
3. 为图片加载失败增加占位文本，说明渐进增强仍需覆盖资源错误，而不只是 API 不支持。

查看本节答案

下一步

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