JavaScript 学习路线

JavaScript 是 Web 前端的核心语言，也是全栈开发的基础。本路线从基础语法出发，循序渐进地覆盖函数、对象、原型、异步编程、DOM 操作、浏览器原理、工程化、Node.js 服务端开发，最后深入到框架生态与 V8 引擎原理，形成完整的知识体系。

学习路线总览

基础语法 → 函数与作用域 → 对象与原型 → 异步编程
    ↓
DOM 与浏览器 → 模块化与工程化
    ↓
Node.js 与后端开发 → 框架生态 → 深入原理

阶段	主题	篇数
第一阶段	JavaScript 基础（语法、函数、对象、原型、异步）	21 篇
第二阶段	浏览器与 DOM（DOM、事件、存储、网络、安全）	14 篇
第三阶段	模块化与工程化（构建工具、测试、性能、架构）	14 篇
第四阶段	Node.js 与后端开发（核心模块、框架、鉴权、部署）	14 篇
第五阶段	框架与深入原理（React/Vue、V8、GC、事件循环）	14 篇

第一阶段：JavaScript 基础

• JavaScript 语言概览与历史 — ECMAScript 演进、引擎、运行环境、语言特性
• 开发环境搭建 — Node.js、VSCode、npm、浏览器控制台、调试工具
• 变量与数据类型 — var/let/const、原始类型、typeof、类型转换
• 运算符与表达式 — 算术/比较/逻辑/位、解构赋值、可选链、空值合并
• 流程控制 — if/switch、for/while、break/continue、标签语句
• 字符串详解 — 字符串方法、模板字符串、Unicode、正则基础
• 数组详解 — 数组方法、迭代方法、排序、去重、类数组
• 函数详解 — 函数定义、参数处理、arguments、箭头函数、IIFE
• 作用域与闭包 — 作用域链、闭包原理与应用
• this 指向详解 — 调用模式、箭头函数、call/apply/bind
• 高阶函数与函数式编程 — map/filter/reduce、柯里化、组合、纯函数
• 对象详解 — 属性描述符、Object 方法、浅拷贝与深拷贝
• 原型与原型链 — proto/prototype、instanceof、继承模式
• ES6+ 类 — class 语法、继承、静态成员、私有字段
• Map/Set/WeakMap/WeakSet — 特性对比、应用场景
• 迭代器与生成器 — Symbol.iterator、yield、for-await-of
• 事件循环与异步模型 — 调用栈、宏任务/微任务、执行顺序
• Promise 深入 — 状态机、静态方法、链式调用、取消
• async/await 深入 — 原理、错误处理、并行执行、顶层 await
• 定时器与异步任务 — setTimeout/setInterval、queueMicrotask、requestAnimationFrame
• 错误处理与调试 — try/catch、Error 体系、自定义错误、调试技巧

第二阶段：浏览器与 DOM

• DOM 基础 — 节点类型、选择器、创建/插入/删除、DocumentFragment
• 属性与样式操作 — attribute/property、classList、style、getComputedStyle
• 事件机制 — 事件流、冒泡/捕获、事件委托、自定义事件
• 表单与表单校验 — 表单事件、正则校验、提交处理
• 浏览器存储 — cookie/localStorage/sessionStorage/IndexedDB
• BOM 详解 — window、location、history、navigator、screen
• 网络请求 — XHR、Fetch、axios、跨域 CORS/JSONP、防抖节流
• 页面渲染原理 — 关键渲染路径、重排/重绘、合成层、性能指标
• 动画与 Canvas — requestAnimationFrame、CSS 动画、Canvas 2D
• WebSocket 与实时通信 — 协议、心跳保活、断线重连、与 SSE 对比
• Web Workers — Worker/SharedWorker/Service Worker、消息通信
• Web Components 与 Shadow DOM — 自定义元素、影子 DOM、样式隔离
• 浏览器安全 — 同源策略、XSS、CSRF、CSP、防御实践
• 移动端与响应式 — 视口、触摸事件、媒体查询、适配方案

第三阶段：模块化与工程化

• 模块系统演进 — IIFE/CommonJS/AMD/UMD/ESM、动态导入
• npm 与包管理 — npm/yarn/pnpm、package.json、semver、发布
• Babel 与转译 — preset-env、polyfill、core-js、兼容策略
• Webpack 深入 — loader/plugin、代码分割、tree shaking、HMR
• Vite 与新一代构建 — ESM 原理、dev server、Rollup、环境变量
• ESLint 与 Prettier — 配置、规则、husky/lint-staged
• TypeScript 基础 — 类型系统、接口、泛型、类型守卫
• 代码规范与重构 — 命名、函数设计、模块划分、重构手法
• 设计模式 — 创建型/结构型/行为型、JS 实现
• 单元测试 — Jest/Vitest、断言、mock、覆盖率、TDD
• 集成测试与 E2E — Cypress/Playwright、测试金字塔、CI 集成
• 性能优化 — 加载优化、渲染优化、内存优化、性能监控
• 前端安全加固 — XSS/CSRF 防御、依赖安全、CSP、输入校验
• 状态管理与架构演进 — MVC/MVVM、Flux/Redux、原子化状态、微前端

第四阶段：Node.js 与后端开发

• Node.js 入门 — 架构、模块系统、EventEmitter、全局对象
• 文件系统与路径 — fs 同步/异步/Promise、path、Buffer
• HTTP 模块与 Web 服务 — http 创建服务器、路由、静态资源
• 流与管道 — Readable/Writable/Transform、pipe、背压
• 进程与集群 — child_process、cluster、worker_threads
• Node 事件驱动深入 — EventEmitter 原理、事件循环各阶段
• Express/Koa 框架 — 中间件模型、路由、错误处理、鉴权
• 数据库访问 — mysql/pg、ORM、连接池、事务
• 缓存与队列 — Redis 客户端、缓存策略、消息队列
• 登录鉴权与安全 — JWT、session、密码加密、OAuth2
• WebSocket 服务端 — ws、Socket.IO、广播与房间
• 日志与监控 — 日志框架、PM2、错误监控、性能分析
• RESTful API 设计 — 资源设计、版本、分页、错误码、Swagger
• 全栈实战 — 前后端联调、Docker 部署、CI/CD

第五阶段：框架与深入原理

• React 核心原理 — 虚拟 DOM、组件、hooks、Fiber 概览
• Vue 核心原理 — 响应式系统、模板编译、diff 算法、Composition API
• 前端路由 — history/hash 路由、React Router/Vue Router、懒加载
• 状态管理实战 — Redux/Zustand/Pinia、不可变数据
• 样式方案与组件库 — CSS Modules/Tailwind、组件库设计
• 微前端与模块联邦 — qiankun、Module Federation、沙箱隔离
• 跨端开发 — React Native、Taro、Electron、对比选型
• V8 引擎与执行机制 — 解析、编译、JIT、内联缓存、隐藏类
• 内存管理与垃圾回收 — 栈/堆、引用计数、标记清除、V8 GC
• 事件循环深入 — 浏览器与 Node 对比、宏微任务调度
• Proxy/Reflect 与元编程 — 拦截器、响应式原理、装饰器
• 异步编程进阶 — 并发控制、任务队列、可取消 Promise
• JavaScript 面试题精讲 — 高频手写题、原理题、场景题
• 学习路线总结与展望 — 知识体系图、学习资源、进阶方向

学习建议

1. 打好语法基础：先掌握变量、函数、对象、原型四大核心，再进入异步编程。
2. 动手练习：每学一个知识点都写代码验证，浏览器控制台和 Node.js 都能运行。
3. 理解原理：不要停留在 API 调用层面，深入事件循环、原型链、闭包等语言机制。
4. 工程实践：完成基础与浏览器阶段后，通过构建工具和测试建立工程化意识。
5. 循序渐进：按阶段推进，每阶段完成后用该阶段的文档做知识复盘。