Skip to content
MiTu

MiTu

A Web developer who loves to Reading and photography

前端知识体系

用一张持续生长的知识地图,串起前端学习与能力进阶的全貌。

这里不是零散内容的堆叠,而是一套从基础到进阶的前端认知框架。你可以把它当作学习路径、知识索引,也可以把它当作定位短板与规划下一步的参考坐标。

知识鱼骨图

一张全面、持续更新的前端在线版技术鱼骨大图

前端培训框架3.0

推荐阅读方式

  • 想建立全局认知:先看整体鱼骨图,再进入对应阶段展开阅读
  • 想规划学习路线:按“入门 -> 初阶 -> 中阶 -> 高阶”逐步推进
  • 想查缺补漏:把当前工作遇到的问题映射到对应能力模块中

四个成长阶段

入门

聚焦前端基础能力,包括 HTML、CSS、JavaScript 与浏览器等核心知识,是后续工程化与框架能力的底座。

初阶

开始进入真实项目开发需要的工具链与框架能力,包括开发工具、包管理、常见框架以及 CSS / JS / 动画库。

中阶

面向工程质量与复杂度处理,关注工程化基础、性能优化、综合能力、设计模式、TypeScript、跨平台开发与服务端渲染。

高阶

更强调体系化建设与底层理解,包括工程体系、框架原理、微前端、Node.js 与能力扩展方向。

为什么这样组织

前端知识并不是孤立存在的。把内容按阶段组织,可以更自然地建立整体认知,也更方便在实践中看见自己的位置、短板与成长方向。

知识鱼骨图的整体架构思路

入门 -> 初阶 -> 中阶 -> 高阶 的维度讲述前端成长路线,既强调知识广度,也强调能力进阶过程中的结构化理解。

彩蛋:前端知识图谱

前端的发展很快,在很多方面都会有各种新的知识出现,因此对于前端的知识图谱和学习路线,并没有一个权威的标准,但有不少比较全面和有参考价值的提案。 我们应该做的是根据这些提案,建立自己的知识体系,并在成长过程中和前端发展过程中动态调整。

下面是几个影响比较大的知识图谱和学习路线。