what-is-fe 争做国内完善、系统的 Web 前端知识体系

前言

很久很久以前（这个社会进步很快，几年就是很久了），我写过一篇文章《自己总结的web前端知识体系大全【欢迎补充】》（后来也有很多人转载，包括那些未经过我同意的），阅读量和点赞都挺多。

再后来，我又在慕课网上写过一篇《web前端知识体系梳理》，也被运营人员转载到了知乎和微信公众号上，加起来阅读量也不小。

上述的内容，全部的流量都算上的话，估摸着总 pv 肯定超过 100w 。可见大家对于这个话题还是比较感兴趣的，这是群众基础。

而且这个话题是持久有效的，再过 10 年、技术再更新，也需要知识体系这个东西。

（原文链接 juejin.cn/post/685512… ，未经允许不得转载！）

现状

上述那两篇文章，大家可以打开看两眼，也可以不看。因为这都是我之前临时总结的内容，时间短，就不能保证全面。我最新整理的知识体系，花费时间比较长，会完善很多。可以继续往下看，或者先一睹为快 。

除了我写的，网络上还有其他人写的关于 web 前端知识体系的文章、图等。你可以去网上搜一下“前端知识体系”或者“前端知识大全”等话题，会搜出很多内容，但有很多问题。

• 内容过时。前端这几年进化非常快，过时且没更新的内容，会误导读者。例如一些工具或者规范，现在已经不用了，那就没必要再去学了。
• 内容不全。例如有些只关注了 js html 和 css ，这明显是把前端的范围缩小了。
• 不够体系。例如将算法和 JS 原型放在一起。
• 不够统一。能搜出来的内容，都各说各的，没有什么共性。这么重要的内容，我觉得有必要统一起来，继续逐步完善。

what-is-fe

既然现在没有合适的内容，那我觉得自己有必要重新整理一下。

前端发展至今，尚未到完全稳定的阶段。考虑知识体系的人本来就不多，能写出来的就更少了，能称为权威的还没有。 而我从 4 年前开始考虑这个问题，应该还算是对“前端知识体系”这个话题有一点话语权的。 其实这些年我一直在思考知识体系这个话题，思考如何能做的更好。

我一直想打造一个关于 Web 前端知识体系的规范品牌。这几天业余空闲多，我就把之前的内容都整理了一下，做出了一个网站原型 what-is-fe 。

目前内容还很空，但我会慢慢的往上补充。每补充的内容，我也都会写成博客，发布出来。您如果觉得知识体系内容不全或者有错误，也可以去 github 提交 issue 或者 PR 。

我们为何需要知识体系

业界的资深技术 leader 曹乐写过《如何成为技术大牛》。其中降到了成为技术大牛的三个必要步骤：

• 找准知识体系
• 刻意训练
• 及时反馈

即，无论是在哪个行业、哪个领域，想要成为技术大牛，必须了解这个行业的知识体系。

前端相比于其他技术栈，给人的感觉就是“乱”，啥啥都要学，此时更加需要一个知识体系来规整，别让自己继续乱下去。 有了体系，就知道自己哪些熟悉、哪些不熟悉，做到全盘掌握。而没有体系，你就会觉得这也要学、那也得会，哪儿哪儿都是自己需要掌握的，好乱，学不动了……

很多人在制造焦虑，很多人在以为别人给自己制造焦虑。但让你去了解知识体系，绝对不是制造焦虑，而是避免焦虑的有效方式。

我对知识体系的初体验

讲一个我自己的故事，我是从合适开始是被到知识体系的。

这也是很久很久以前，我刚毕业 2 年多，我去学习并且考取了 PMP ，一个项目管理证书。因为我当时的工作，是给一些企业开发项目管理软件，类似于微软的 project ，不过是网页版。

在学习 PMP 之前，我一直觉得项目管理也就那写功能，我们都已经开发出来了呀。用户提了一些需求，我们就照着用户的意思做就是了，不会的就去网上查一查，参照一些其他的软件 —— 应该还有很多企业，也是这么做的。

但是考完 PMP 之后，我就发现，原来项目管理是有一整套知识体系的，都是前人总结出来的知识点。只要照着这个知识体系，它就能解决 90% 的问题。而之前用户提的问题，都全在这个知识体系里面，早就有答案了，不用我们再去网上查、再去参考其他软件的实现。

同理，我也很快意识到，学习编程也是这么个道理，梳理知识体系，然后逐个攻破，注重基础。所以，那段时间我技术进步非常快。

知识体系应该是什么样子的

知识体系不是越新越好，也不是越多越好。贪新、贪多，一直都是大部分程序员的问题。我觉得，只要具备以下两点就可以了。

全面

知识体系一定要保证知识点全面，不能有遗漏。但是，全面并不是越多越好，而是越少越好。现在是一个知识爆炸的时代，无关的东西尽量剔除掉，别占用我们有限的大脑内存。

体系

知识点很多，但并不是一盘散沙，而是结构化、体系化的。

就类似于一棵树有几千片树叶子，但是他们都是有序的分布再各个树枝上的，而且树枝、树干还有结构关系。再例如，一个学校有 2w 个学生，要分学院、专业、班级，这样才能管理的起来，否则就是一群流民。再例如，一本书几十万字，也要分章节才能组织起来。

这一点非常重要，否则这么多知识点，都散乱的话，我们是记不住的。只有合理的组织，我们才能理解并且掌握。

如何整理出一个知识体系

要把前端所有内容都涵盖了，而且要做到体系、结构化、不杂乱，其实挺难的。所以我前前后后花了很多精力来查阅资料，思考总结，然后整理这个知识体系。

PS：我整理这份知识体系，对标的是高级前端工程师，即至少是能达到大厂基层前端工程师的水平。所以考虑的内容会比较多，也有很多基础知识。

首先要确定范围

说到前端，现在扯的东西特别多，范围越来越大。而刚开始做知识体系，先把范围定小一点，慢慢来。所以，目前的知识体系仅仅是狭义的前端，即开发网页。但是内容也非常多。

想到前端，很多人可能下意识的说，要先学 html css 和 js ，然后就是现在流行的 Vue React ，巴拉巴拉。

其实这里忽略了一个前提，作为前端程序员，首先得是一名程序员。所以关于程序员的编程知识也得有，即大学里学的那些计算机基础课程。不要求像准备考研似的那么精通，至少得大概了解。

网页还会涉及和服务端通讯，就需要 http 的相关知识，这块内容也不少。

写代码的时候可能会用到各种工具流程，即开发环境的知识储备，也得有。

代码写完、测试完，上线运行起来了，此时可能会有性能问题、安全隐患，需要检测统计等，这些也得明白。

然后再体系化处理

如果只是考虑范围，遇到什么新内容就堆进去，其实什么难度。但这样做，那出来的结果就是一盘散沙，就像你浏览器书签里那么多收藏一样，并没有啥帮助。举一个例子，前者就像一个国家有 1 亿人，没有组织和管理，后者就像一个国家有 1 亿人，有全国首脑，且划分了省市区层层级别，进行管理。

知识体系，分开来说。一是知识，二是体系（即结构化）。有了体系和结构化，才容易理解和记忆。有了体系和机构化，才容易再次扩展和更新。

如何体系化，不光要看自己对这个行业的理解，还很考验总结归纳能力。我的划分方式，大家直接去看知识体系的详情吧。一开始我还是抱着一种理想主义的心态来做，但做到最后发现还是需要很多权衡和取舍，没法做到想象中的完美。

例如，第一级“网络请求”应该也属于“语法&规范”中的内容，但是这条内容太多，而且很重要，就单独拿出来了。再例如，第一级“常用工具”，如果仔细搜索并积累的话，会有很多，但是为了减少信息量（现在信息量已经很大了），不得不尽量减少。

总之，如何体系化没有标准，也没有对错。有任何好的建议，欢迎提给我。

范围之外的内容

我们说的“大前端”，还包括很多其他的内容，以后再根据优先级去扩展更新。

• 跨端（RN，Weex）
• hybrid（ionic cordova）
• 小程序
• PWA
• electron
• nodejs

一些更加抽象，比知识点更加高阶的内容，也暂时不在该范围中。后面会根据需要继续补充。

• 基础建设
• 架构设计（如现在比较火的微前端）

一些暂时还没常用的知识，也暂不包含

• Shadow DOM
• Web Component

怎样学习前端知识体系

先讲明白，这是以上帝视角来看所有的范围，不会有细节。 即，学完会提高你的视野，帮你找准方向，甚至思考问题的方式。但不会立马帮你解决当下的问题，不是即学即用的。 但它将影响你接下来的职业生涯。它是“道”不是“术”。

看到这么多，不要焦虑，不要气都学会，但要求都知道。你如何理解一个东西（视野、认知），决定了你将达到的高度。 如果你觉得前端只有 js html css ，那也就决定了你突破不了这个界限。

也不要盲目学习，要看你的定位、职业发展和市场的需求。不要把有限的精力用于无限的知识扩展，要把所学的知识用起来。 “世界上宽广的，世界不是高深的” —— 有人评价王垠。

想持续学习逐步精通，还需要有一些知识点之外的软技能，例如：

• 搜索
  • caniuse
  • 思否
  • stackoverflow
• 阅读文档
• 英语
• 写作（常见的博客网站）
• 总结归纳（抽象）
• 业余充电意识
• 尝试做开源

关于知识盲区

一定要允许自己有知识盲区，甚至可以有很多的知识盲区。—— 但是，要把这些盲区也纳入到你的体系中。即，你可以没用过、不知道细节，但是你得知道它叫啥，它是干嘛的。

我们每个人的精力和工作经历都是有限的，你不可能了解的既精通又全面，所有有知识盲区很正常。

例如我自己，canvas 和 svg 我都没实际用过，它们的一些细节我也不知道。但它们在我的知识体系里，我知道他们是网页做图形的，如果哪天用到了，我至少知道这些技术方案，还能快速的查一查学一学，做点基本的工作。

最后

科学的学习思维，肯定有一条是关于体系思维的。这一点你如果不太懂的话，先相信我就可以了。

学习前端知识体系，欢迎多看看 what-is-fe 。