WHY IT MATTERS
先用一句白话理解
如果 JavaScript 是通用语言，Web API 就像城市提供的公共设施：道路、邮局、仓库和电网各有使用规则。浏览器的安全模型则是门禁系统，不能为了方便随意拆掉。
LEARNING OUTCOMES
学完你能做到什么
使用事件委托和 DOM API 构建稳定交互
处理 Fetch 的成功、HTTP 错误、超时、取消和流式响应
为结构化数据选择 IndexedDB，并理解存储生命周期
使用 Worker 隔离耗时计算，使用 Service Worker 提供离线能力
解释同源策略、CORS、XSS 与 CSP 的作用边界
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
DOM 查询、创建、更新、事件传播与事件委托
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
FormData、URL、History、Clipboard 与常用 Observer
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Fetch、Request、Response、AbortController 与 Streams
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Web Storage、IndexedDB 与存储配额
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Web Worker、结构化克隆与可转移对象
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Service Worker 生命周期、Cache API 与离线策略
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Web Components、Custom Elements 与 Shadow DOM
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
同源策略、CORS、XSS、CSP、权限和隐私
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
用一个父级监听器管理动态列表中的全部操作
实现可取消请求并避免旧响应覆盖新结果
把耗时计算移入 Worker，保持主线程可交互
断网刷新后仍能打开应用壳和最近数据
HANDS-ON PROJECT
动手任务
构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。
交付清单
- ✓在线与离线均可打开的数据搜索台
- ✓主线程和 Worker 的消息协议说明
- ✓缓存更新与失效策略
- ✓同源、CORS、XSS 和 CSP 安全检查表
MINIMUM RUNNABLE CODE
把求和计算放到 Web Worker
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8" />
<button id="calculate">在后台计算</button>
<output id="result">等待计算</output>
<script>
const workerSource = [
"self.onmessage = function (event) {",
" const total = event.data.reduce(function (sum, value) { return sum + value; }, 0);",
" self.postMessage(total);",
"};"
].join("\n");
const url = URL.createObjectURL(new Blob([workerSource], { type: "text/javascript" }));
const worker = new Worker(url);
worker.onmessage = (event) => {
document.querySelector("#result").value = "结果：" + event.data;
URL.revokeObjectURL(url);
worker.terminate();
};
document.querySelector("#calculate").addEventListener("click", () => {
worker.postMessage([18, 24, 36, 42]);
});
</script>
</html>先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 用一个父级监听器管理动态列表中的全部操作
- 实现可取消请求并避免旧响应覆盖新结果
- 把耗时计算移入 Worker，保持主线程可交互
- 断网刷新后仍能打开应用壳和最近数据
改变约束，验证你真的理解
- 不看教程，独立完成：使用事件委托和 DOM API 构建稳定交互
- 不看教程，独立完成：处理 Fetch 的成功、HTTP 错误、超时、取消和流式响应
- 不看教程，独立完成：为结构化数据选择 IndexedDB，并理解存储生命周期
- 不看教程，独立完成：使用 Worker 隔离耗时计算，使用 Service Worker 提供离线能力
- 不看教程，独立完成：解释同源策略、CORS、XSS 与 CSP 的作用边界
把实验变成能交付的工程
- 在线与离线均可打开的数据搜索台
- 主线程和 Worker 的消息协议说明
- 缓存更新与失效策略
- 同源、CORS、XSS 和 CSP 安全检查表
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
把 fetch Promise 成功当成 HTTP 状态一定成功
对每个列表项重复绑定事件监听器
把敏感信息长期保存在 localStorage
缓存资源后没有设计版本更新和旧缓存清理
把用户输入直接交给 innerHTML
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
JavaScript 是语言，DOM 和 Web API 才是它在浏览器中的工具箱。本课用数据仪表盘串起事件、网络、存储、后台线程、离线缓存和安全边界。
Q02如果只能保留三个验收结果，应该保留什么？＋
在线与离线均可打开的数据搜索台；主线程和 Worker 的消息协议说明；缓存更新与失效策略
Q03学习过程中最需要主动避免什么？＋
把 fetch Promise 成功当成 HTTP 状态一定成功；对每个列表项重复绑定事件监听器；把敏感信息长期保存在 localStorage；缓存资源后没有设计版本更新和旧缓存清理；把用户输入直接交给 innerHTML
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“构建离线优先的业务数据搜索台：用 Worker 执行聚合计算、IndexedDB 保存最近数据、Service Worker 管理离线资源，并完成一次 XSS/CSP 自查。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：使用事件委托和 DOM API 构建稳定交互
- □核心机制已用最小实验验证：用一个父级监听器管理动态列表中的全部操作
- □风险已检查：把 fetch Promise 成功当成 HTTP 状态一定成功
- □风险已检查：对每个列表项重复绑定事件监听器
- □风险已检查：把敏感信息长期保存在 localStorage
- □风险已检查：缓存资源后没有设计版本更新和旧缓存清理
- □风险已检查：把用户输入直接交给 innerHTML
- □交付物可复现：在线与离线均可打开的数据搜索台
- □交付物可复现：主线程和 Worker 的消息协议说明
- □交付物可复现：缓存更新与失效策略
- □交付物可复现：同源、CORS、XSS 和 CSP 安全检查表
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。