Front-End-Develop-Guide 完整学习地图：前端基础到全栈延伸

📅 2026-10-09 📂 前端 🏷️ 开源导读, 前端
25 分钟阅读 · 6,357 字

固定归档版本的完整 README 与 MIT License 已收录，另将 HTML/CSS、JavaScript、生态、算法、Node、扩展、桌面、移动、WebGL 和 V8 整理成可执行学习路线。

本文围绕 icepy/Front-End-Develop-Guide 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；README 固定到 commit 0ab4e8843d40f9fed9886995e2cc9307a3f53159；15,205 字节、192 行、121 个 HTTP(S) 链接引用（118 个资源目标）；仓库声明 MIT，本文完整保留 README 与 LICENSE 下方保留固定版本入口。

仓库内容地图

  • 完整保留原 README 的 121 个 HTTP(S) 引用、目录锚点和全部原始主题
  • 前端基础：HTML/XHTML、CSS/Sass/PostCSS、JavaScript、Web API、SVG/WebGL
  • 工程生态：TypeScript、React/Vue、监控、OAuth、HTTP/2、HTTPS、缓存和移动性能
  • 基础能力：面试练习、数据结构与算法、规范和问题定位
  • 全栈延伸：Node.js、Express/Koa、Redis、MongoDB、浏览器扩展
  • 跨端方向：桌面应用、Ionic/React Native/Flutter、WebGL、V8
  • 附原始 MIT License、固定 commit、快照校验值和现代官方文档入口

怎么读才有收获

先按本文的六阶段路线逐段构建能力，再把固定 README 当作离线资源目录按需查阅。每个历史教程都要确认其运行时、框架、协议和许可版本；浏览器语言规范与宿主 API 分开核验。

固定版本与完整收录范围

本文固定在 icepy/Front-End-Develop-Guide 的 README commit 0ab4e8843d40f9fed9886995e2cc9307a3f53159。快照为 15,205 字节、192 行，含 121 个 HTTP(S) 链接引用（其中 3 个是状态徽章，118 个是资源目标）和 15 个目录内锚点；原 README 与完整 MIT 许可原文都附在本文后半部分。README 哈希为 4a6a401043b47603aecb184d9fad53f80423ac70fd4591c5720527b309ff21a9，许可哈希为 83e4dd21429a91fb7cea67a476032a9641425e5355df2e0f589a738b6ec9fd2c。固定快照用于离线阅读与追溯，不表示其中每条链接仍然可用。

它不是一门循序渐进、每章都配有练习的课程，而是一张 2010 年代前端生态资源地图：从 Web 标准、HTML/CSS、JavaScript 和工程生态，延伸到面试/算法、Node.js、MongoDB、浏览器扩展、桌面/移动应用、WebGL、V8 与社区。原仓库目前已归档；因此把它当作“当时开发者如何组织知识”的材料，再用今天的标准和项目文档校准。

原目录地图

原目录覆盖内容阅读时要回答的问题
什么是前端开发Web Front-End Stack、W3C/MDN、HTML、CSS、JavaScript、Web API、SVG、WebGL、MathML浏览器平台提供什么能力？哪些属于语言、规范、宿主 API 或应用框架？
阅读HTML/XHTML、HTML5、CSS 指南、Sass、PostCSS 与布局语义结构、样式组织和构建转换分别解决什么问题？
JavaScript Guide风格规范、JSON API 约定、语言教程、怪癖、模式、ES6、Promise、YDKJS这段行为由 ECMAScript 规定，还是由浏览器/Node 宿主提供？
生态jQuery 插件、TypeScript、React、Vue、异常监控、OAuth、HTTP/2、HTTPS、缓存、移动适配与性能依赖是框架、库、协议、产品能力还是实践文章？证据和适用版本是什么？
Questions面试题、移动 Web 实践、移动端问题集合题目背后的机制能否用规范、代码和测试解释？
数据结构与算法LeetCode、JavaScript 数据结构/算法、复杂结构与课程如何说明正确性、不变量、复杂度和边界，而不只背答案？
Node.js入门、Express/Koa、调试、性能、Redis、多人博客与社区文章如何把浏览器知识延伸到进程、网络、文件、数据和生产运行？
MongoDB入门书与数据建模文档模型、索引、约束、事务、备份和迁移如何匹配业务？
Chrome 扩展扩展开发教程权限、内容脚本、后台 service worker、消息传递和发布审核是什么边界？
桌面 / 移动node-webkit/NW.js、HEX、Electron、Ionic、React Native、Flutter哪些能力来自 WebView，哪些需要原生桥接、权限或平台适配？
WebGL / V8图形入门、引擎设计、性能和 hidden class图形 API 与 JavaScript 引擎分别负责哪一层？测量数据如何复现？
社区列表前端开发者社区与交流入口如何筛选高质量讨论，避免把热度当作准确性或维护承诺？

这张表保留了固定 README 的所有主目录和衍生方向。完整资源链接及原始条目见文末快照；本文新增的说明用于建立阅读顺序，不会把旧链接重新包装成今天的官方推荐。

从资源地图到可执行路线

1. 先学浏览器真正理解的东西

先用语义 HTML 表达结构，再用 CSS 完成布局和响应式呈现，接着用 JavaScript 操作 DOM、处理事件和请求。把键盘焦点、表单标签、错误提示、图片替代文本和窄屏作为功能的一部分，而不是最后再补的装饰。练习项目可以是一份可搜索的个人技术目录：支持移动端、键盘操作、URL 查询参数、空/错误/加载状态，并能刷新后恢复筛选。

不要把 Web API 和 JavaScript 语言本身混为一谈。Promise、Map、模块语法属于 JavaScript 语言/标准库；DOM、Fetch、IntersectionObserver、存储和窗口对象由宿主平台提供，具体可用性受浏览器和运行环境影响。出现“某 API 在 Node/浏览器都能用”的说法时，分别查对应平台文档并做目标版本测试。

2. 把 JavaScript 机制连到真实交互

沿着类型转换、作用域、闭包、对象/原型、异常、Promise、事件循环和模块系统逐个建立小实验。每个实验都记录：输入、可观察结果、涉及的规范/宿主、错误边界和至少一个反例。把 ES6、Promise 等旧教程用作概念练习时，现代语法与语义以当前 ECMAScript 标准及运行时为准；别因教程年代久远就照搬 polyfill、全局补丁或已过时的模块加载方式。

TypeScript 能增加静态检查和类型建模，但类型会在编译后消失；外部 JSON、URL 参数、localStorage 与网络响应仍需运行时解析和校验。不要把类型断言当作数据验证，也不要把“编译通过”当作接口契约正确。

3. 框架能力要回到平台基础

React/Vue 等框架主要组织组件、状态、渲染与副作用。学习顺序建议是：组件输入输出、列表和表单、状态所有权、异步请求和竞态、路由、错误处理、测试，再观察框架如何利用浏览器 DOM。重构时要回答状态由谁拥有、何时失效、切页后如何清理，以及慢响应能否覆盖新查询。不要用“用了框架”代替对 HTML 语义、网络、焦点和性能的理解。

README 提到的异常监控、OAuth、缓存和 HTTP 资源是跨层主题：监控要清除令牌/个人数据并限流；OAuth 应核对授权服务器与客户端流程，不把一篇文章当协议规范；HTTP 缓存需结合方法、状态码、Cache-Control、验证器和共享缓存；HTTPS/TLS 的安全参数应由当前平台和部署配置决定。

4. 算法题用来练推理，不取代工程验证

每题先写输入约束和朴素实现，再指出瓶颈，说明优化依赖的性质，最后用测试覆盖空输入、重复值、边界值、无效输入和规模上限。数组、对象键、Map/Set 的相等规则并不相同；字符串索引通常面对 UTF-16 码元，不一定等于用户看到的字符。面试题适合做练习，生产逻辑还需要可读性、资源预算、错误处理和业务契约。

5. 全栈是能力延伸，不是工具清单

从浏览器发出的一个请求开始跟踪：路由、鉴权、输入校验、业务服务、数据库、缓存、日志、超时和部署。Node.js 学习优先查当前官方 API；Express/Koa 文章和旧入门教程可用于了解历史设计，但安全、模块格式、运行版本和中间件行为要按当前项目核对。MongoDB 内容要结合索引、聚合、事务、数据增长、备份恢复与迁移验证，不能只因 JSON 结构相似就忽略数据一致性。

浏览器扩展现在应从 Manifest V3 的 manifest、权限、service worker 生命周期和内容脚本隔离入手；不要把仓库旧教程中的后台常驻页或远程执行脚本方案直接搬用。Electron 桌面应用能力更强，加载远程页面时要禁用 Node 集成、启用 context isolation 和 sandbox、限制导航/权限并验证 IPC sender；不要关闭 webSecurity 来“修好”跨域。移动端、桌面端和 WebGL 都应给设备能力、能耗、输入方式和性能设定明确降级路径。

六阶段学习与验收

  1. 页面基础：构建语义 HTML + 响应式 CSS 的小型目录页；验收标准是键盘、读屏基本语义、手机宽度和空/错误状态可用。
  2. 语言基础：为搜索、过滤和排序实现独立函数；给类型转换、Unicode、异步和错误路径写测试。
  3. 平台 API：加入 Fetch、AbortController、URL 状态、观察器和存储；验证取消、重复请求、页面恢复和隐私数据清理。
  4. 框架与工程：用一个框架做同一功能，加入 lint、单元/组件测试、构建分析和错误边界；记录框架相较原生方案解决了什么。
  5. 后端与数据：用 Node.js 提供校验过的只读 API，增加限流、超时、日志脱敏、数据库索引和备份恢复演练。
  6. 专项扩展：只选一个方向，例如 MV3 扩展、Electron、Flutter 或 WebGL；先列权限和威胁模型，再做最小可运行原型。

每个阶段的产出都包含源码、测试、版本、运行步骤、性能/可访问性记录和未覆盖范围。学习路线完成的标志不是收藏完所有链接，而是能解释实现、证明边界，并能在依赖或浏览器升级后复验。

当前官方资料入口

上游 README 固定版本完整快照

下文完整保留固定 commit 中按 MIT License 授权的 README 内容与链接；为融入本文目录，源标题层级整体下移一级，原始文件和许可另有固定快照校验。

Front-End-Develop-Guide

img img img

这份指南汇集了前端开发所使用语言的主流学习资源，并以开发者的视角进行整理编排而成，想了解该指南及前端开发更多信息的同学，可以阅读短文《致 Front-End Developers（2015）》，欢迎开发者一起维护，或反馈/投稿。

由 @icepy 负责整理，不足之处还望大家多多包容与提供建议。

目录

什么是前端开发

  • Web Front-End Stack：这张图非常详细。
  • W3C组织提供了官网的地址：w3.org，可以去查询最近实现的标准以及将来可能实现的讨论。
  • web前端开发可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等，语言是编程的基础，火狐的MDN出了一份比较通略的文档，可以快速查看 Web 技术文档。

阅读

JavaScript Guide

生态

如果你想飞起来，这正是好去处。

Front-End Questions

Front-End 需要了解的数据结构与算法

延伸可扩展的方向（全栈）

延伸可扩展的方向是指，脱离了浏览器环境的编程。

关于编译，建议阅读 工程中的编译原理--Jison入门篇

如果你想发展为全栈，建议阅读 Growth: 全栈增长工程师指南

Node.js

入门

阅读

Mongodb
Chrome扩展开发
桌面应用程序开发
移动应用程序开发
WebGL
v8 引擎文献

可以先通过阅读 V8引擎简介来了解JavaScript现在最好的引擎是怎样的，然后访问 Chrome V8来获取最新的资料，API文档可以访问 v8-docs。

社区列表

MIT License

MIT License

Copyright (c) 2018

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

动手路线

  1. 构建可搜索、键盘可用、手机适配并能保存筛选状态的技术目录页。
  2. 为一个异步搜索功能加入请求取消、竞态测试、错误状态、URL 同步和运行时输入校验。
  3. 选择 Node API、Manifest V3 扩展、Electron 或 WebGL 中一个方向做隔离原型，附权限/威胁模型、测试和降级方案。

使用边界

上游仓库已归档，资源中包含年代久远的 HTTP 链接、旧教程和旧框架用法。快照受 MIT 授权而完整保留；被推荐的第三方内容不因此继承 MIT，必须独立核验其来源、许可、维护状态和安全性。

原始入口

Live Notes

读者弹幕

留言提交后会先进入审核，审核通过后对其他读者公开。