前端知识架构图
如果让我做一个划分,前端的知识在总体上分成基础部分和实践部分,基础部分包含了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就完全不适用前端,前端代码必须是线上实时可用的。这一部分内容将会针对前端的持续集成提出一些建设的思路。
搭建系统
接下来的案例是搭建系统,前端工作往往多而繁杂,针对高重复性、可模块化的业务需求,传统的人工开发不再适用,搭建系统是大部分大型前端团队的选择。这一部分内容我将会介绍什么是搭建系统,以及一些常见的搭建系统类型。
架构与基础库
最后一个部分,会给大家介绍前端架构和基础库的知识。软件架构师主要解决功能复杂性的问题,服务端架构师主要解决高流量问题,而前端是页面间天然解耦,分散在用户端运行的系统,但是前端架构也有自己要解决的问题。
前端需求量大、专业人才稀缺,更因为前端本身运行在浏览器中,有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。这一部分文章我将会介绍前端架构工作的一些思路和切入点。