前端知识全景图：从浏览器基础到全栈交付的学习路线

完整保留 F2E-Awesome 固定快照的 63 个目录标题，并把它们串成浏览器、前端工程、网络后端、AI 实时交互与上线运维的可验收路径。

本文围绕 f2e-awesome/knowledge 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；README 固定到 2026-10-10 获取的 master commit 81ca0902aa98fb60c83067e312924bfa28c3ba72；61,997 字节、953 行、63 个三级分类标题（62 个不同名称）、576 条 HTTP(S) 链接引用（563 个不同目标）。README 自报更新于 2023-02-24 并标注 CC BY-NC-SA 4.0；根目录 LICENSE 返回 404。 下方保留固定版本入口。

仓库内容地图

• 语言与界面：JS、HTML5、CSS、DOM、事件、数据结构、算法、设计模式和函数式
• 浏览器与图形：PWA、WebAssembly、Canvas、SVG、WebGL、数据可视化、性能优化
• 工程与架构：工具、类库、包管理、模块化、测试、规范、监控、微前端、LowCode、框架和源码
• 跨端与应用：移动端、小程序、Electron、物联网、Serverless 和 Web3
• 网络与安全：HTTP/协议、跨域、加密、安全、DNS、CDN、Nginx、抓包
• 服务与平台：Python、数据库、Elasticsearch、Linux、容器、消息队列、DevOps、Rust
• 成长方向：AI、面试、前端组织、学习站点与技术杂谈

怎么读才有收获

仓库本质是知识体系，不是线性教程。先沿“浏览器运行机制 -> 网络 -> 工程化 -> 服务端 -> 交付与监控”的主线走，再用具体项目拉动 AI、图形、跨端等分支。跨领域章节应在博客中分别落到前端、后端和全栈，不复制整个图谱。

把知识图谱当成能力地图，而不是收藏夹

F2E-Awesome 的价值不在于“看完 576 个链接”，而在于提醒我们：前端开发不是只写组件。页面运行在浏览器和网络之上，连接接口、数据、构建、测试、监控、交付与组织协作；有些分支还会延伸到桌面、移动端、AI、物联网和服务端。把每个目录都变成书签只会积累待办，真正的学习单位应是一项能解释、实现、测试和维护的能力。

本文使用 f2e-awesome/knowledge 的固定 README 目录做导航，并独立解释每个知识域之间的关系。README 自报更新时间为 2023-02-24；其引用链接、工具状态和示例都可能陈旧，所以这里不把它们包装成 2026 年的现行推荐，也不复制整份链接编排或第三方文章。

固定快照的全部目录标题

下面保留上游 README 的 63 个目录标题及原顺序；DevOps 在原快照中重复出现。此索引用于确认覆盖范围，不代表每个标题都是独立技术，也不代表其中每条链接仍有效：

开发工具、前端类库、必学原理、移动端、PWA、WebAssembly、Canvas、小程序、WebGL、SVG、Elasticsearch、HTML5、模块化编程、Graphql、算法、加密、数据结构、包管理、Python、设计模式、数据库、CSS、函数式编程、网络协议、DOM、跨域、Git、事件模型、安全、前端规范、Nginx、DNS、CDN、V8 引擎、JS、Linux、Electron、抓包工具、测试、容器化、监控、浏览器、数据可视化、前端工程化、物联网、主流框架、消息队列、DevOps、微前端、LowCode、架构、AI、面试、前端组织、学习网站、技术杂谈、优化、Web 服务器端、Serverless、源码学习、DevOps、Web3.0、Rust。

这份快照是 CC BY-NC-SA 4.0 许可的知识目录：上游 README 的徽章指向该许可，而固定 commit 的根目录 LICENSE 路径返回 404。本文只复用简短主题名称并加入来源链接，不镜像原始链接清单或其描述；若后续要摘录或改编上游正文，应按原许可完整履行署名、非商业和相同方式共享要求。

七条相互连接的学习主线

1. Web 平台：先弄清代码运行在哪里

HTML 定义内容结构和语义，CSS 决定布局与呈现，JavaScript 提供语言机制；DOM、Fetch、WebSocket、IntersectionObserver、Storage、Canvas 等则是宿主提供的 Web API。ECMAScript 规范解释语言行为，浏览器平台规范解释 API 与事件行为，Node.js 又有自己的模块、进程、文件、流和网络 API。把“JS 能做什么”与“某个宿主给了什么 API”分开，是跨浏览器、跨标签页、SSR 和 Node 排错的起点。

学习 DOM 与事件模型时，不只记 API 名称：关注捕获/冒泡、默认行为、焦点、键盘、Pointer Events、事件委托、事件清理，以及组件卸载后是否还留有监听器。CSS 学习从盒模型、层叠、布局和响应式开始，再进入动画、合成层和设计系统；理解何时应该用 CSS，而不是用 JavaScript 不断读写布局属性。

浏览器与性能专题要观察真实页面，而不是猜测。用 DevTools 看网络瀑布、主线程长任务、内存、渲染与缓存；IntersectionObserver 适合观察元素相对视口或根容器的交叉变化，可用于懒加载、目录高亮和曝光测量，但不是精确逐像素碰撞检测。观察器也要在完成后 unobserve/disconnect，并避免把曝光事件当成用户真正理解内容的证明。

2. JavaScript 与计算机基础：从现象追到机制

JS 主线包括类型和转换、作用域/闭包、对象与原型、异常、异步任务、模块和内存。每学一个机制都写小实验：先陈述输入输出，再找规范或平台依据，最后用边界用例证明。不要把“会背事件循环”当作理解；要能解释宏任务/微任务由谁排队、浏览器渲染机会在哪里、Node 不同阶段为何不同，以及阻塞 CPU 如何拖垮事件循环。

算法、数据结构、函数式编程和设计模式是解决问题的工具，不是为了让代码看起来高级。先列输入约束和不变量，再选数组、Map、树或图；说明时间/空间复杂度。函数应尽可能明确输入输出，隔离 I/O 与副作用；模式应在重复变化点出现后再抽象，而不是给每个小组件套一个模式名。

3. 前端应用：框架之上仍是平台契约

主流框架和前端类库帮助组织组件、状态和更新；它们不会消除 HTML 语义、网络失败、焦点管理、浏览器兼容、隐私和安全责任。先理解组件边界和状态所有权，再加路由、表单、数据缓存、国际化与 UI 组件。针对 React/Vue 等框架，实践重点是异步请求竞态、切页清理、错误/空/加载状态、SSR 每请求隔离和版本升级。

跨标签页通信要按数据语义选方案：同源窗口间可使用 BroadcastChannel 发送结构化消息；storage 事件适合把少量持久状态变化通知给其他文档，但写入方本身不会收到自己的 storage 事件。两种方式都要定义消息版本、来源、有效期、去重和 logout 行为，不广播访问令牌或敏感正文。广播只负责通知，真正的权限仍由服务端校验。

前端工程化包含模块边界、包管理、构建、代码检查、类型检查、测试、资源体积、发布和回滚。先使用项目已有的工具链，只有实际问题无法解决时才引入新依赖。Git 提交应可追溯，CI 才是不能跳过的质量门槛；本地 hook 适合快速反馈，不是安全控制。

4. 网络、后端与数据：沿一条请求链把全栈接起来

从用户动作开始，完整画出浏览器 -> DNS/CDN -> TLS/HTTP -> 反向代理 -> 服务路由 -> 鉴权/校验 -> 业务逻辑 -> 数据库/缓存/队列 -> 响应和遥测。每一跳都要标明超时、重试、取消、容量、错误码、敏感数据和 trace/correlation ID。跨域是浏览器同源策略和服务端 CORS 响应的协作，不是换个请求库就能绕过的前端问题。

网络基础从 DNS 解析、TCP/TLS、HTTP 方法/状态码/缓存、连接复用、代理和 WebSocket 握手入手。REST 请求适合明确的请求-响应；SSE 是服务端到客户端的单向事件流，适合进度和生成文本；WebSocket 是双向连接，适合双方都需实时发送消息的场景。要比较重连、代理超时、鉴权、负载均衡、流控和断线恢复，而不是只看“能不能实时”。

后端基础应覆盖 Node.js/Python 运行时、服务端路由、输入 schema、数据库事务/索引、Redis 缓存、消息队列、日志、监控、Linux、Nginx、容器和部署。Elasticsearch 是搜索与分析引擎，不是无需建模的万能数据库；缓存需要失效/一致性方案，队列需要幂等、重试上限、死信和可观测性。服务端技能也应独立成后端路线，不因“前端图谱”一词而混在一个分类里。

5. 测试、安全与可观测性：把“能跑”变成可证明

测试分层：纯逻辑做单元测试，组件验证可见行为，集成测试覆盖路由/API/数据边界，真实浏览器端到端测试关键旅程。为权限、异常、取消、重复提交、慢网络、刷新恢复、窄屏和键盘操作加入回归。构建成功只是最早一层信号，不能证明上线流程、数据权限或用户体验正确。

安全从威胁建模开始：资产、信任边界、攻击者能力和滥用路径都要讲清。重点覆盖 XSS/HTML 注入、CSRF、越权、SSRF、开放重定向、文件上传、依赖供应链、秘密管理和日志脱敏。密码学只使用经过审查的标准库和协议，不自己设计加密算法；不把“Base64 编码”称为加密。AI 输入输出同样是非可信数据，展示模型生成内容时要校验结构、处理 HTML 和控制工具调用权限。

监控指标描述系统状态，日志解释具体事件，trace 串起一次请求经过的服务。三者应使用一致的请求标识并剔除密码、令牌、个人信息和完整用户提示词。前端采样、隐私告知、离线队列和错误聚合都要有边界。OpenTelemetry 可提供统一的 traces/metrics/logs 语义，但需要确认各语言 SDK、浏览器自动埋点和 exporter 的当前稳定级别，不能只因规范统一就假定所有实现成熟。

6. 图形、跨端与新领域：按宿主能力控制预算

Canvas、SVG、WebGL、数据可视化和 WebAssembly 分属不同能力边界：矢量图适合可访问且可交互的图形元素；Canvas 适合高频绘制；WebGL 负责 GPU 图形管线；Wasm 适合将已有的计算模块带入 Web，并不会自动解决 DOM、权限或业务接口。要监测像素比、内存、帧时、context lost、worker 生命周期，并为低端移动设备提供静态或低复杂度降级。

PWA、小程序、原生 App、Electron、IoT、Serverless 和 Web3 需要分别看运行时、权限、离线、签名、网络与发布模型。跨端框架可以共享一部分 UI 和业务逻辑，却不能让平台的文件、通知、支付、安全区域和后台生命周期完全一致。先写 capability matrix，再做真机/真实部署验证。

Rust、Python、Elasticsearch、Linux、容器与云平台等条目是有用的相邻知识，但学习时先回到当前目标：前端工程师需要知道接口、运行时和部署边界；全栈工程师需要能对数据一致性、容量、备份和恢复负责。不要把“知道工具名字”误算成可以承担该领域生产责任。

7. AI 与团队协作：把新能力做成可控的产品链路

AI/Agent 功能通常包含用户输入、服务端鉴权、模型/工具调用、增量事件、内容审核、错误/取消、引用来源和审计。浏览器展示层负责解析事件、维护部分输出、处理重连和取消；服务端必须执行权限、预算、速率限制和工具白名单。区分“模型正在生成”“工具执行中”“完成”“失败”，不要把原始 token 洪流直接当 UI；可按语义批量刷新，避免每个 token 都触发布局。

选 SSE 还是 WebSocket 取决于消息方向：单向文本/进度流优先评估 SSE；若需要浏览器同时发送连续控制消息或高频双向状态，再评估 WebSocket。普通 WebSocket API 没有内建背压，生产实现应限制消息大小和缓冲、批量渲染、监控积压并及时关闭连接。无论协议如何，网络重连不能重复执行有副作用的模型工具；服务端要用任务 ID、幂等键和状态查询保证恢复安全。

团队协作与前端组织主题则落在需求拆分、API 契约、代码评审、发布节奏、事故复盘、跨职能沟通和责任边界。用短的设计记录写清为什么选、拒绝了什么、监控什么、怎么回滚；这比仅列“使用 React、Docker、AI”更能真实呈现工程能力。

一个贯穿前后端的练习项目

做一个可搜索的个人知识库/技术文章站，按四段完成，每段必须有验收产物：

1. 浏览器体验：语义化目录、关键词筛选、URL 同步、移动端布局、键盘可用；用 IntersectionObserver 做可取消的目录激活/延迟加载，清理观察器。
2. 数据与账号：搭建只读文章 API、账号权限、数据库迁移和阅读进度；外部数据运行时校验，服务端拒绝越权，限制请求频率。
3. 实时功能：加入 AI 文章解读的 SSE 输出，包含任务状态、增量正文、完成和失败事件；支持停止、重连后查询当前任务，不重复触发模型调用。若需求变成双向协作，再用 WebSocket 做第二个原型并记录流控差异。
4. 上线运维：加入单元/集成/移动端 E2E、请求追踪、错误率和延迟指标、日志脱敏、备份恢复、部署检查与回滚说明。

每阶段都保存 README、图表/接口契约、测试结果、录屏或截图、性能基线和已知限制。只有另一台设备/环境能按照说明复现成功，才算完成；“本机打开正常”不是交付验收。

示例：模型流事件先校验，再渲染

SSE 或 WebSocket 的数据帧都是外部输入。下面只接受约定的三个事件形状；真实项目还应校验任务 ID、字段长度、事件顺序、重复事件和服务端身份。把输出写入文本节点或经过审核的 Markdown renderer，避免直接把生成文本塞进 innerHTML。

function parseAgentEvent(value) {
  if (value === null || typeof value !== "object" || Array.isArray(value)) {
    throw new TypeError("Invalid agent event");
  }
  if (value.type === "delta" && typeof value.text === "string") {
    return { type: "delta", text: value.text };
  }
  if (value.type === "done") return { type: "done" };
  if (value.type === "error" && typeof value.message === "string") {
    return { type: "error", message: value.message };
  }
  throw new TypeError("Invalid agent event");
}

把收藏变成长期能力

• 每次只选一个当前项目遇到的问题；写下症状和衡量指标。
• 查标准/官方文档，再读一篇教程；记录来源更新时间和目标版本。
• 做一个最小实验，给成功和失败路径各写测试。
• 把实验接进真实小功能，验证手机、网络、权限和可访问性。
• 复盘依赖、性能、安全、发布和回滚成本，再决定是否推广。

难度星级只能描述某份材料的预期门槛，不是个人能力评级；工作年限也不能替代可验证的项目证据。面试、社区、学习网站和技术杂谈适合拓展视野，但遇到协议/浏览器行为/安全结论，应回到规范或维护方官方资料交叉验证。

官方资料入口

• MDN Learn Web Development：从基础到扩展的结构化课程
• ECMAScript 最新规范
• MDN BroadcastChannel
• MDN Intersection Observer API
• MDN Server-Sent Events
• MDN WebSocket API 与缓冲/背压限制
• React Learn
• Node.js API 文档
• OWASP Cheat Sheet Series
• OpenTelemetry JavaScript 文档

动手路线

1. 用博客自身做例子，追踪一次页面请求从 DNS、CDN、Nginx 到 SSR 和数据库。
2. 针对一个交互功能写前端性能、安全、测试与可观测性检查表。
3. 每个领域保留一篇实践复盘，记录版本、取舍与失败案例。

使用边界

固定快照 README 标注 CC BY-NC-SA 4.0；本文只复用简短目录名称并独立组织说明，不复刻上游 576 条链接和描述。目录之外的上游正文或图片如要转载/改编，需遵守署名、非商业和相同方式共享条件。

原始入口

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