前端基础知识框架图

前言

所谓知识架构，可以理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，更轻松地记忆一些原本难以记住的点。也能够帮助我们发现一些知识上的盲区。

当然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

前端的基础知识在总体上可以分成基础部分和实践部分。

• 基础部分包含了 JavaScript 语言（模块一）、CSS 和 HTML（模块二）以及浏览器的实现原理和 API（模块三），这三个模块涵盖了一个前端工程师所需要掌握的全部知识。
• 实践部分包含了性能、工具链、持续集成、搭建系统、架构与基础库。

JavaScript

在 JavaScript 的模块中，首先我们可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时。

接下来，我们又按照程序的一般规律，把运行时分为数据结构和算法部分：数据结构包含类型和实例（JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型，实例就是它的内置对象部分）。所谓的算法，就是 JavaScript 的执行过程。

HTML和CSS知识点

在 HTML 的部分，我们会按照功能和语言来划分它的知识，HTML 的功能主要由标签来承担，所以可以把标签做一些分类：

• 文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；
• 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
• 链接：提供到文档内和文档外的链接；
• 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
• 表单：用于填写和提交信息的一类标签；
• 表格：表头、表尾、单元格等表格的结构。

HTML 是一门标记语言，它有两个重要的语言机制：实体、命名空间。
HTML 的补充标准：ARIA，它是 HTML 的扩展，在可访问性领域，它有至关重要的作用。

CSS 部分，从语言和功能两个角度去划分。

• 语言部分，包含 CSS 的各种语法结构，比如 @rule、选择器、单位等等。
• 功能部分，大致可以分为布局、绘制和交互。布局类中两个最常用的布局：正常流和弹性布局。绘制分成图形相关的和文字相关的绘制。最后还有动画和其它交互。

浏览器的实现原理和API

浏览器的实现原理是深入理解 API 的基础。从一般的浏览器设计出发，可以按照解析、构建 DOM 树、计算 CSS、渲染、合成和绘制的流程来分析浏览器的工作原理。

在 API 部分，首先从 W3C 零散的标准中挑选几个大块的 API，主要有：事件、DOM、CSSOM 几个部分，它们分别覆盖了交互、语义和可见效果，这是我们工作中用到的主要内容。至于其他的 API，可以通过了解 Chrome 已经实现的 API 跟 W3C 标准的对应关系和它的生成过程，来覆盖其它部分。

前端工程实践

• 性能

首先我们会谈谈性能。对任何一个前端团队而言，性能是它价值的核心指标，从早年“重构”的实践开始，前端有通过性能证明自己价值的传统。

• 工具链

对一个高效又合作良好的前端团队来说，一致性的工具链是不可或缺的保障，作为开发阶段的入口，工具链又可以和性能、发布、持续集成等系统链接到一起，成为团队技术管理的基础。我们需要了解企业中工具链的建设思路。

• 持续集成

过去持续集成概念和理论都主要针对软件开发，而对前端来说，持续集成是一个新的课题。前端的持续集成提出一些建设的思路。

• 搭建系统

前端工作往往多而繁杂，针对高重复性、可模块化的业务需求，传统的人工开发不再适用，搭建系统是大部分大型前端团队的选择。我们需要了解一些常见的搭建系统类型。

• 架构与基础库

软件架构师主要解决功能复杂性的问题，服务端架构师主要解决高流量问题，而前端是页面间天然解耦，分散在用户端运行的系统，但是前端架构也有自己要解决的问题。前端需求量大、专业人才稀缺，更因为前端本身运行在浏览器中，有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。我们需要了解前端架构工作的一些思路和切入点。

总的基础知识框架图

有了完备的知识框架，以后遇到任何的前端基础知识，都能在这份知识框架中找到落脚点，从而能够体系地思考问题，分析问题。

对于有体系和源流的知识，适合从技术的背景、原理和设计出发，把知识的内容呈现出来，便于系统学习和理解。比如 JavaScript 中的对象、CSS 的排版等。

对于零散的知识，适合用一些方法做成知识图谱，例如用表格或者脑图的形式来整理知识的结构。这样可以记住个大概，用到时再去查阅，比如 JavaScript 的词法、HTML 中的所有标签、以及浏览器中的 API等。

参考资料

• 极客时间《重学前端》，作者：winter