前端系统化学习计划表（含完整知识思维导图）

前言

本计划适配零基础 / 基础薄弱 / 体系混乱 的前端学习者，全程由浅入深、层层递进，避开无效学习。学完可达到：独立开发企业级项目、掌握前端核心原理、具备面试求职能力。

学习节奏：每日1.5-2h，周末复盘+实战，拒绝只看不学，所有知识点配套实战练习。

一、前端完整知识体系思维导图（文字版，可直接复制绘图）

前端知识总纲

• 1. 基础基石

  • HTML：语义化、表单、多媒体、适配、SEO

  • CSS：选择器、盒模型、BFC、Flex/Grid、动画、适配、工程化样式

  • JavaScript：基础语法、ES6+、DOM/BOM、异步、事件循环、WebAPI、手写源码

• 2. 工程化能力

  • 包管理：npm/pnpm/yarn

  • 构建工具：Vite/Webpack/Rollup

  • 代码规范：ESLint/Prettier/Husky

  • CI/CD、打包部署、环境配置

• 3. 核心框架生态

  • Vue全家桶：Vue2/Vue3、Pinia、Router、UI组件库、Nuxt

  • React全家桶：Hooks、状态管理、Router、Next、UI组件库

  • 跨端：UniApp、Electron、React Native

• 4. 高阶必备

  • TypeScript：基础类型、高级类型、泛型、工程实战

  • 浏览器原理：渲染机制、重绘重排、V8、GC、事件循环

  • 网络：HTTP/HTTPS、缓存、跨域、安全攻防

• 5. 性能与优化

  • 加载优化、渲染优化、代码优化、缓存优化

  • 核心性能指标、性能监控、长列表优化

• 6. 进阶拓展

  • 可视化：ECharts/AntV/Three.js

  • 全栈能力：Node.js、接口开发、数据库基础

  • 架构能力：微前端、组件库、Monorepo、设计模式

• 7. 工程实战能力

  • Git版本控制、Mock接口、联调

  • 单元测试、E2E测试、项目部署

二、3个月分阶段学习计划（90天，精准到周）

第一月：夯实基础（HTML+CSS+JS 零基础通关）

目标：熟练页面布局、掌握JS核心语法、能独立写静态页面+简单交互，杜绝基础漏洞。

第1周：HTML+CSS零基础精通

• Day1-2：HTML语义化、常用标签、表单、多媒体、viewport适配、SEO基础

• Day3-4：CSS选择器、盒模型、margin塌陷、BFC原理与实战

• Day5-6：Flex弹性布局、Grid网格布局（核心重点，吃透所有布局场景）

• Day7：周复盘+实战：仿写官网静态页面（导航栏、卡片、轮播布局）

第2周：CSS进阶+动画+适配方案

• Day8-9：定位、浮动、渐变、阴影、transform变换

• Day10-11：transition过渡、keyframes动画、常用动画案例

• Day12-13：移动端适配、rem/vw、媒体查询、响应式开发

• Day14：周复盘+实战：适配移动端的完整静态页面

第3周：JavaScript基础语法吃透

• Day15-16：变量、数据类型、运算符、流程控制、函数

• Day17-18：作用域、闭包、this指向、原型与原型链

• Day19-20：数组常用方法、字符串处理、正则表达式基础

• Day21：周复盘+刷题：基础算法、语法练习题

第4周：JS DOM+BOM+异步核心

• Day22-23：DOM增删改查、事件流、事件委托、页面尺寸计算

• Day24-25：BOM、本地存储、定时器、浏览器基础API

• Day26-27：异步发展史、Promise、async/await、宏微任务、事件循环

• Day28：月度复盘+综合实战：带交互的完整H5页面（表单校验、弹窗、轮播）

第二月：工程化+TS+主流框架（就业核心）

目标：掌握现代前端工程化、熟练TS、精通Vue3/React任一框架，可开发业务项目。

第5周：ES6+进阶+前端工程化

• Day29-30：ES6+全特性：解构、展开、Set/Map、模块化、可选链等

• Day31-32：npm/pnpm、package.json、依赖管理、脚本命令

• Day33-34：Vite使用、项目搭建、目录结构、插件基础

• Day35：规范配置：ESLint+Prettier+Husky 代码规范闭环

第6周：TypeScript 系统学习

• Day36-37：基础类型、接口、类型别名、联合/交叉类型

• Day38-39：泛型、枚举、类型推断、类型守卫

• Day40-41：tsconfig配置、高级类型、工具类型

• Day42：实战：给小型JS项目全面改成TS

第7周：Vue3 全家桶精通（零基础到实战）

• Day43-44：Vue3基础、Composition API、setup、ref/reactive响应式

• Day45-46：组件通信、生命周期、插槽、自定义指令

• Day47-48：Vue Router4、Pinia状态管理

• Day49：实战：搭建Vue3+TS+Vite基础项目模板

第8周：Vue项目实战/React入门（二选一深耕）

• Day50-53：UI组件库使用（Element Plus/Vant）、接口请求、项目封装

• Day54-56：完成一个完整业务项目（后台管理/移动端H5）

• Day57：月度复盘：梳理框架知识点、整理项目笔记

第三月：原理+优化+面试+高阶实战（进阶求职）

目标：吃透底层原理、掌握性能优化、具备面试竞争力、能独立架构项目

第9周：浏览器底层+网络原理

• Day58-59：浏览器渲染流程、重绘重排、图层合成

• Day60-61：V8引擎、垃圾回收GC、事件循环底层

• Day62-63：HTTP1.1/2/3、HTTPS、浏览器缓存机制

• Day64：跨域解决方案、XSS/CSRF安全防御

第10周：前端性能优化全体系

• Day65-66：资源优化：压缩、懒加载、CDN、分包

• Day67-68：渲染优化、代码优化、内存泄漏排查

• Day69-70：性能指标LCP/CLS/FID、Lighthouse性能检测

• Day71：实战：对已有项目进行全方位性能优化

第11周：高阶能力拓展

• Day72-73：前端常用设计模式、防抖节流、深浅拷贝等手写方法

• Day74-75：Node.js基础、常用内置模块、简单接口开发

• Day76-77：ECharts数据可视化实战

• Day78：微前端/组件库基础认知

第12周：项目复盘+面试刷题+能力闭环

• Day79-83：整理所有知识点笔记、手写高频源码（Promise、bind、深拷贝等）

• Day84-87：刷前端面试题、复盘项目亮点与优化点

• Day88-90：最终项目迭代、部署上线、形成个人作品集

三、必做实战项目（贯穿全程）

1. 基础阶段：静态官网、移动端适配页面、交互式H5页面

2. 框架阶段：Vue3+TS后台管理系统（包含登录、权限、表格、表单、分页）

3. 高阶阶段：可视化大屏、个人组件库、项目性能优化重构

四、学习核心原则（避坑指南）

• 1. 先精后广：基础没吃透不碰高阶，框架不学原理等于白学
• 2. 学练结合：每学一个知识点，必须写代码实战，拒绝眼会手废
• 3. 每周复盘：整理错题、笔记、项目问题，形成知识闭环
• 4. 聚焦主线：前期只深耕一套框架（Vue/React二选一），不贪多