读 JavaScript Guidebook：用规范和实例搭知识图谱

按固定版本 468 篇 Markdown 页面重组 8 个知识域，覆盖语言语义、BOM/DOM、网络、模块、内置对象、面向对象与模式，并给出现代版本核验路线。

本文围绕 tsejx/javascript-guidebook 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；完整 Git tree 固定到 2fc92ffc0863f8ed7dd2092d8066a9fa9ca29030（2025-08-28）：docs 下 468 篇 Markdown 页面；GitHub LICENSE 为 MIT，README 对指南正文另标 CC BY-NC-SA 3.0 中国大陆。 下方保留固定版本入口。

仓库内容地图

• 语言核心：类型、表达式、作用域、执行上下文、异步与模块
• 浏览器：BOM、DOM/CSSOM、事件、窗口/视口、文件、离线存储与性能观察
• 网络与安全：DNS/连接、HTTP 缓存/协议、上传、同源边界和 Web 安全
• 对象与模式：标准内置对象、反射、类/原型、创建/结构/行为/架构模式
• 全量目录：8 个知识域、467 篇知识页及 1 篇总入口
• 资料治理：区分 ECMAScript 与 Web 宿主规范，记录版本、证据和兼容日期

怎么读才有收获

固定版本包含大量 ECMAScript 语言与 Web 平台细节。先读概念地图，再沿真实浏览器问题跳转；旧版 ES5.1/ES2015-2018 链接用于历史对照，当前语义要核对 TC39 living spec、MDN 与 WHATWG，并在目标运行时测试。

固定版本：它不是一本薄薄的 README

本文按 tsejx/javascript-guidebook 的 master 提交 2fc92ffc0863f8ed7dd2092d8066a9fa9ca29030（2025-08-28）盘点。该提交的 docs/ 下有 468 篇 Markdown 页面：一个入口页和 467 篇知识文档，覆盖 JavaScript 语言、浏览器对象、DOM、网络、内置对象、模块、面向对象与设计模式。仓库 API 标注 MIT，但 README 对指南正文另写 CC BY-NC-SA 3.0 中国大陆；代码许可不能自动覆盖文章和插图。本文只做原创知识地图，不复制章节或图片；需要再发布原文时，应按对应作品许可逐项确认署名、非商业和相同方式共享条件。

完整知识域地图

页面数来自固定 commit 的完整 Git tree；每个知识域的数量含其入口页，八域合计 467 篇，另有 docs/index.md 一篇总入口。它是目录覆盖统计，不等于每篇都经过 2026 年复核，也不代表浏览器、规范或依赖仍处于当前状态。

从基础语义走到浏览器行为

类型、表达式与执行上下文

从原始值、对象、隐式转换、比较、运算符优先级和控制流开始；接着理解函数调用、词法环境、作用域链、闭包、异常传播、执行上下文和调用栈。学到原型时要区分对象的内部原型、构造函数的 prototype 属性与 class 语法；它们相关但并非同一概念。遇到“this 指向哪里”，先看调用形式和严格模式，再看箭头函数的词法捕获，不要从函数定义位置直接猜。

事件循环、Promise、计时器、微任务和异步迭代要与宿主环境分开讲：ECMAScript 定义 Promise 等语言语义，浏览器另有任务队列、渲染机会和 Web API。一个页面“卡住”可能是长同步任务、布局/绘制开销、过多微任务或网络等待；async/await 改善表达方式，不会自动把 CPU 运算移到 Worker。

标准内置对象：先按语义选工具

内置对象章节覆盖 Array、TypedArray、Map/Set、WeakMap/WeakSet、String、RegExp、Number、Math、Date、JSON、ArrayBuffer、Promise、Generator、Proxy/Reflect、Symbol 和全局函数等。阅读 API 时要把“是否改变原值、迭代顺序、键相等规则、异常条件、复杂度和浏览器支持”写下来。Map 的键可为任意值，Set 适合按值去重，弱集合适合对象关联且不阻止垃圾回收；它们不能只凭名称当作普通对象/数组替代品。日期和本地化还需明确时区、日历与 Intl 语义。

数组方法的关键差异包括稀疏空位处理、是否原地修改、回调参数和返回类型；字符串下标是 UTF-16 code unit，不等于 Unicode 字符或用户感知的字素簇。正则表达式要覆盖 Unicode、捕获组、全局状态、零宽匹配和灾难性回溯。把 API 名记熟只是起点，关键是围绕输入边界建立可执行断言。

BOM、DOM 与 CSSOM 是不同层的接口

BOM 范围包括 window、视口和窗口位置、导航/历史、设备与连接信息、文件及二进制数据、离线存储、性能观测、事件与 IntersectionObserver。DOM 进一步覆盖 Node/Element/Document、动态集合、事件流、CSSOM 和多媒体。开发者应区分 layout viewport 与 visual viewport，区分滚动位置和屏幕坐标，并知道 getBoundingClientRect() 会随滚动变化。页面尺寸、软键盘和浏览器工具栏在移动端尤其不能用单一 innerHeight 假设。

事件章节适合按捕获、目标、冒泡、委托、默认动作、取消和清理建立模型。observer 类 API 用来观察状态变化，不是“免成本的滚动监听”：IntersectionObserver 适合可见性门槛，ResizeObserver 观察尺寸，MutationObserver 观察 DOM 改动；回调仍需节流工作、避免循环写布局，组件卸载时调用 disconnect()。存储章节还要区分 Cookie、Web Storage、IndexedDB、Cache API 与 Service Worker 缓存的生命周期、容量、同源边界和清理方式。

HTTP、传输与安全

网络域把计算机网络架构、HTTP 和 Web 安全合在一条请求路径上：URL/DNS、连接、TLS、请求/响应、内容协商、缓存、HTTP/2/HTTP/3、CDN、上传下载与脚本加载。HTTP 缓存必须同时看 freshness、验证器、Cache-Control、ETag/Last-Modified 和用户数据敏感性；“返回 304”不是万能的性能策略。文件上传还需要服务端大小/真实类型校验、权限、存储隔离和恶意内容处理。安全主题要结合同源策略、CORS、XSS、CSRF、Cookie 属性和 CSP，避免把前端隐藏按钮当授权。

用 Map 写一个有明确语义的小工具

同一份分组逻辑用 Map 保存任意键，不会把 __proto__ 当作特殊原型属性，也能区分数字 1 和字符串 "1"：

function groupByStable(items, keyOf) {
  const groups = new Map();
  for (const item of items) {
    const key = keyOf(item);
    if (!groups.has(key)) groups.set(key, []);
    groups.get(key).push(item);
  }
  return groups;
}

这个实现刻意只定义稳定分组和键语义，不偷偷排序、转换键或复制输入对象。若改用普通对象或 Object.groupBy，返回值形态、原型和键转字符串行为都要重新检查。

设计模式与面向对象放在真实问题里学

面向对象章节涵盖对象创建、构造函数、原型继承、类定义和继承链；模式章节按创建型、结构型、行为型和架构型分类。不要把“会画 UML”当成模式掌握：创建型解决实例创建/生命周期，结构型组织接口与组合，行为型规定对象间协作。浏览器前端常见的策略、观察者、命令、适配器和外观模式，应能说明它们消除了哪类耦合、引入了什么间接层，以及如何测试和释放订阅。

设计一个上传流程时，可以用状态机表达 idle、validating、uploading、success、failed、cancelled；用策略选择存储或校验方式；用事件订阅更新界面，但要有取消、重试和重复提交边界。若一个简单条件分支更清晰，就不必为了模式名把它拆成一套类。

版本化阅读：历史目录不等于现行手册

README 列出的 ES5.1、ES2015 到 ES2018 链接适合追踪历史演进，但不可作为 2026 年全部语言能力的终点。先用最新 ECMAScript living specification 查语言规则，再用 MDN 查易读解释与兼容性；HTML、DOM、Fetch、存储和渲染属于宿主 Web 标准，不应误归为 ECMAScript 语法。最终行为还要在目标浏览器/Node.js 版本跑测试，兼容性判断记录目标矩阵和核验日期。

建议每个旧章节旁维护一张小型勘误卡：主题、原说法、受影响版本、当前规范/MDN 证据、可运行反例、发布日期。对有副作用的 API、安全、缓存和移动端布局尤其要这样做。这样保留历史学习价值，又不会把过时结论伪装成现状。

四周学习路线与验收

1. 第 1 周：语言核心。复习类型转换、作用域/闭包、原型、函数、异常、Promise 和模块；每个主题给出一个边界测试，不以背面试题替代运行验证。
2. 第 2 周：浏览器对象与 DOM。做一个带 IntersectionObserver、ResizeObserver、键盘导航和销毁流程的列表页面；用性能面板确认没有长任务和观察器泄漏。
3. 第 3 周：网络与安全。为一个小型上传/列表 API 画请求链，配置缓存验证、CORS、Cookie/CSP 和文件限制，再用匿名、越权、超大文件与网络中断测试拒绝路径。
4. 第 4 周：综合工程。选择一个模式改造实际重复逻辑，写决策记录；测试桌面与移动浏览器，核对可访问性、错误状态、性能和降级方案。

完成标准不是“读完 468 页”，而是能从用户可见问题定位相关层、解释规范和浏览器宿主的边界、用最小例子证伪错误假设、写出回归测试，并注明兼容性与资料日期。

当前权威参考

• ECMAScript 当前 living specification
• MDN JavaScript Guide
• MDN JavaScript Modules
• WHATWG HTML Living Standard
• WHATWG DOM Standard
• 固定版本 README
• 上游在线阅读站

动手路线

1. 选一个 Promise 或原型链问题，写出规范条款、浏览器测试和自己的解释。
2. 对一处过时内容发 Issue 或写勘误，记录来源与复现步骤。
3. 把长篇学习笔记拆成单主题文章，维护版本信息与参考链接。

使用边界

GitHub 仓库 LICENSE 标注 MIT，但 README 对指南正文另标 CC BY-NC-SA 3.0 中国大陆；代码许可不自动覆盖文章与插图。本文不复制原文或图片，重新发布任何章节前需核对具体作品许可。上游内容和浏览器行为也需按当前版本复核。

原始入口

• 固定版本 README 与仓库入口
• 发现这份资源的原始推荐
• 返回 25 个开源项目专题目录