前端知识架构图

如果让我做一个划分，前端的知识在总体上分成基础部分和实践部分，基础部分包含了JavaScript语言（模块一）、CSS和HTML（模块二）以及浏览器的实现原理和API（模块三），这三个模块涵盖了一个前端工程师所需要掌握的全部知识。

JavaScript

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

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

HTML 和 CSS

我们都知道HTML的标签可以分为很多种，head里面的我们称为元信息类标签，诸如title、meta、style、link、base这些，它们用来描述文档的一些基本信息。还有一类是一些诸如section、nav的标签，它们在视觉表现上跟div并没有区别，但是各有各的适用场景，我们把它们称作语义类标签。另外一类是img、video、audio之类的替换型媒体类标签，用来引入外部内容，平常开发中你也会经常用到。再有就是表单类的，比如input、button。

所以，基于这样的分类，我把标签分成下面几种。

文档元信息：通常是出现在head标签中的元素，包含了描述文档自身的一些信息；
语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；

链接：提供到文档内和文档外的链接；
替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；

表单：用于填写和提交信息的一类标签；
表格：表头、表尾、单元格等表格的结构。

CSS部分，按照惯例，我们也会从语言和功能两个角度去介绍。在语言部分，我们会从大到小介绍CSS的各种语法结构，比如@rule、选择器、单位等等。功能部分，我们大致可以分为布局、绘制和交互类。

在布局类我们介绍两个最常用的布局：正常流和弹性布局。绘制类我们则会分成图形相关的和文字相关的绘制。最后我们会介绍动画和其它交互。

浏览器的实现原理和API

浏览器部分我们会先介绍下浏览器的实现原理，这是我们深入理解API的基础。

我们会从一般的浏览器设计出发，按照解析、构建DOM树、计算CSS、渲染、合成和绘制的流程来讲解浏览器的工作原理。

在API部分，我们会从W3C零散的标准中挑选几个大块的API来详细讲解，主要有：事件、DOM、CSSOM几个部分，它们分别覆盖了交互、语义和可见效果，这是我们工作中用到的主要内容。

其他的API怎么办呢，别着急，在最后，我会给出一份Chrome已经实现的API跟W3C标准的对应关系和它的生成过程，来覆盖其它部分。

前端工程实践

最后一个模块是前端工程实践。我们在掌握了前面的基础知识之后，也就基本掌握了做一个前端工程师的底层能力。在这个模块中，我选择了性能、工具链、持续集成、搭建系统、架构与基础库这几个方向的前端工程实践案例，来与你一起分享我的经验。

性能

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

但是性能并非细节的堆砌，也不是默默做优化，所以，我会从团队的角度来跟你一起探讨性能的方法论和技术体系。

工具链

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

持续集成

接下来还会给大家介绍前端的持续集成，持续集成并非一个新概念，但是过去持续集成概念和理论都主要针对软件开发，而对前端来说，持续集成是一个新的课题（当然对持续集成来说，前端也是一个新课题），比如daily build就完全不适用前端，前端代码必须是线上实时可用的。这一部分内容将会针对前端的持续集成提出一些建设的思路。

搭建系统

接下来的案例是搭建系统，前端工作往往多而繁杂，针对高重复性、可模块化的业务需求，传统的人工开发不再适用，搭建系统是大部分大型前端团队的选择。这一部分内容我将会介绍什么是搭建系统，以及一些常见的搭建系统类型。

架构与基础库

最后一个部分，会给大家介绍前端架构和基础库的知识。软件架构师主要解决功能复杂性的问题，服务端架构师主要解决高流量问题，而前端是页面间天然解耦，分散在用户端运行的系统，但是前端架构也有自己要解决的问题。

前端需求量大、专业人才稀缺，更因为前端本身运行在浏览器中，有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。这一部分文章我将会介绍前端架构工作的一些思路和切入点。