共计 3997 个字符，预计需要花费 10 分钟才能阅读完成。
列一份前端常识架构图
在上一篇文章中，咱们简要地总结了前端的学习门路与办法，咱们提到的第一个学习办法就是：建设常识框架。那么，明天咱们就一起来列一份前端的常识框架图。
在开始列框架之前，我想先来谈谈咱们的指标。实际上，咱们在网上能够找到很多参考资料，比方 MDN 这样的参考手册，又比方一份语言规范，然而咱们的课程既不是一本参考手册，也不是一份语言规范。参考手册心愿做到便于查阅、便于了解和全面，语言规范的指标是谨严、无脱漏、无歧义。
而咱们的课程有什么不同呢？我认为，作为一个课程，有两个指标：一个是把无奈通过查阅解决的原理和背景讲清楚，另一个是把不不便查阅和记忆的内容整顿好。
我会尽量避免像后面提到的两种文档一样逐条目列举知识点和细节，当然，这不是在说两种文档没有价值，而是咱们各有分工，参考手册和语言规范做的事件，咱们没必要反复去做，即便做了也不肯定能做得更好。
在这个课程里，我心愿能和你一起打造一个前端常识的框架，再把知识点做个遍历，这其中，有原理和背景的局部，我去解说常识的原理和背景。如果没有的话，咱们就去讲整顿和记忆这部分常识的办法，这样，即便你遇见无奈一下子记住的常识，也能够很容易地查阅参考手册和规范来解决。
如果让我做一个划分，前端的常识在总体上分成根底局部和实际局部，根底局部蕴含了 JavaScript 语言（模块一）、CSS 和 HTML（模块二）以及浏览器的实现原理和 API（模块三），这三个模块涵盖了一个前端工程师所须要把握的全副常识。
学完这三个局部，你再联合根本的编程能力，就能够应答根本的前端开发工作了。实际局部（模块四）重点会介绍我在工作过程中遇到的问题和解决方案，心愿这块内容可能帮忙你和你的前端团队找到可能的倒退方向和着力点。
JavaScript
下面是我整顿的 JavaScript 常识架构图，上面咱们来具体解释一下。
在 JavaScript 的模块中，首先咱们能够把语言依照文法、语义和运行时来拆分，这合乎编程语言的个别法则：用肯定的词法和语法，表白肯定语义，从而操作运行时。
接下来，咱们又依照程序的个别法则，把运行时分为数据结构和算法局部：数据结构蕴含类型和实例（JavaScript 的类型零碎就是它的 7 种根本类型和 7 种语言类型，实例就是它的内置对象局部）。所谓的算法，就是 JavaScript 的执行过程。
类型局部中，对象比其它所有类型加起来都要更为简单，所以咱们会用较长的篇幅来解说对象，包含它的一些历史和设计思路。
执行过程咱们则须要依照从大构造到小构造的角度解说，从最顶层的程序与模块、事件循环和微工作，到函数、再到语句级的执行。咱们从粗到细地理解执行过程。实例局部，对 JavaScript 来说相似根底库，JavaScipt 的内置对象多达 150 以上，思考到咱们即便逐次解说也必然不如 MDN 更加粗疏全面，所以咱们会从利用和机制的角度，筛选其中几个体系来解说。
文法中的语法和语义根本是一一对应关系，在 JavaScript 规范中有一份语法定义表，它同样不适宜一一解说，咱们会从 JavaScript 语法中特地的中央，以及与日常开发比拟相干的中央来重点解说，剩下的内容和词法局部，咱们会率领大家做一些数据挖掘工作，从这份表格中找到一些和咱们日常开发非亲非故的内容。
语义的大部分内容咱们会在运行时的解说中透出，同时它又跟语法有对应的关系，所以咱们不再独自拿进去解说。
HTML 和 CSS
下面是我整顿的 HTML 和 CSS 的常识架构图，咱们来具体解释一下。
在 HTML 的局部，咱们会依照性能和语言来划分它的常识，HTML 的性能次要由标签来承当，所以咱们首先会把标签做一些分类，并对它们别离进行解说。
咱们都晓得 HTML 的标签能够分为很多种，head 外面的咱们称为元信息类标签，诸如 title、meta、style、link、base 这些，它们用来形容文档的一些根本信息。还有一类是一些诸如 section、nav 的标签，它们在视觉体现上跟 div 并没有区别，然而各有各的实用场景，咱们把它们称作语义类标签。另外一类是 img、video、audio 之类的替换型媒体类标签，用来引入内部内容，平时开发中你也会常常用到。再有就是表单类的，比方 input、button。
所以，基于这样的分类，我把标签分成上面几种。
1、文档元信息：通常是呈现在 head 标签中的元素，蕴含了形容文档本身的一些信息；
2、语义相干：扩大了纯文本，表白文章构造、不同语言因素的标签；
3、链接：提供到文档内和文档外的链接；
4、替换型标签：引入声音、图片、视频等内部元素替换本身的一类标签；
5、表单：用于填写和提交信息的一类标签；
6、表格：表头、表尾、单元格等表格的构造。
咱们的重点会放在前四种标签上，表单和表格较少用到，而且根本以查阅型常识为主，这里就不拿进去解说了。
除了标签之外，咱们还应该把 HTML 当作一门语言来理解下，当然，标记语言跟编程语言不太一样，没有编程语言那么谨严，所以，咱们会简要介绍 HTML 的语法和几个重要的语言机制：实体、命名空间。
最初咱们会介绍下 HTML 的补充规范：ARIA，它是 HTML 的扩大，在可拜访性畛域，它有至关重要的作用。
CSS 局部，依照常规，咱们也会从语言和性能两个角度去介绍。在语言局部，咱们会从大到小介绍 CSS 的各种语法结构，比方 @rule、选择器、单位等等。性能局部，咱们大抵能够分为布局、绘制和交互类。
在布局类咱们介绍两个最罕用的布局：失常流和弹性布局。绘制类咱们则会分成图形相干的和文字相干的绘制。最初咱们会介绍动画和其它交互。
浏览器的实现原理和 API
下面是我整顿的浏览器常识架构图，咱们来具体看一下。
浏览器局部咱们会先介绍下浏览器的实现原理，这是咱们深刻了解 API 的根底。
咱们会从个别的浏览器设计登程，依照解析、构建 DOM 树、计算 CSS、渲染、合成和绘制的流程来解说浏览器的工作原理。
在 API 局部，咱们会从 W3C 零散的规范中筛选几个大块的 API 来具体解说，次要有：事件、DOM、CSSOM 几个局部，它们别离笼罩了交互、语义和可见成果，这是咱们工作中用到的次要内容。
其余的 API 怎么办呢，别着急，在最初，我会给出一份 Chrome 曾经实现的 API 跟 W3C 规范的对应关系和它的生成过程，来笼罩其它局部。
前端工程实际
最初一个模块是前端工程实际。
咱们在把握了后面的基础知识之后，也就根本把握了做一个前端工程师的底层能力。在这个模块中，我抉择了性能、工具链、继续集成、搭建零碎、架构与根底库这几个方向的前端工程实际案例，来与你一起分享我的教训。
性能
首先咱们会谈谈性能。对任何一个前端团队而言，性能是它价值的外围指标，从早年“重构”的实际开始，前端有通过性能证实本人价值的传统。
然而性能并非细节的堆砌，也不是默默做优化，所以，我会从团队的角度来跟你一起探讨性能的方法论和技术体系。
工具链
下一个案例是工具链。这一部分，我将会探讨企业中工具链的建设思路。对一个高效又单干良好的前端团队来说，一致性的工具链是不可或缺的保障，作为开发阶段的入口，工具链又能够和性能、公布、继续集成等零碎链接到一起，成为团队技术治理的根底。
继续集成
接下来还会给大家介绍前端的继续集成，继续集成并非一个新概念，然而过来继续集成概念和实践都次要针对软件开发，而对前端来说，继续集成是一个新的课题（当然对继续集成来说，前端也是一个新课题），比方 daily build 就齐全不实用前端，前端代码必须是线上实时可用的。这一部分内容将会针对前端的继续集成提出一些建设的思路。
搭建零碎
接下来的案例是搭建零碎，前端工作往往多而繁冗，针对高重复性、可模块化的业务需要，传统的人工开发不再实用，搭建零碎是大部分大型前端团队的抉择。这一部分内容我将会介绍什么是搭建零碎，以及一些常见的搭建零碎类型。
架构与根底库
最初一个局部，会给大家介绍前端架构和根底库的常识。软件架构师次要解决性能复杂性的问题，服务端架构师次要解决高流量问题，而前端是页面间人造解耦，扩散在用户端运行的零碎，然而前端架构也有本人要解决的问题。
前端需求量大、专业人才稀缺，更因为前端自身运行在浏览器中，有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩大。这一部分文章我将会介绍前端架构工作的一些思路和切入点。
下面的这些案例来自我在领导手淘前端团队时的教训，和我在阿里巴巴工作参加降职面试时听到的案例，这些内容简直是每一个年老的前端团队成长过程中都会须要的基础设施。
好了，前端的常识体系咱们大抵列出来了。你可能发现了，常识体系图中的每一个知识点，教程里都有与之对应的文章，这也是我的初衷：心愿借由解说这 40 余个知识点，帮你建设起前端的常识框架。
讲述模式
基于这份常识框架图，咱们的课程次要采纳两种讲述模式：一种是重点解说的课程，一种是常识图谱型的课程。
重点解说的课程咱们会从技术的背景、原理和设计登程，把常识的内容出现进去。这种模式实用于有体系和源流的常识，比拟适宜零碎学习和了解，比方 JavaScript 中的对象、CSS 的排版。
常识图谱型的课程则提供一些办法，用表格或者脑图的模式来整顿常识的构造。这种模式实用于零散的常识，比拟适宜记住大略，用到时去查阅，比方 JavaScript 的词法、HTML 中的所有标签、以及浏览器中的 API 就非常适宜这样的解说形式。
结语
明天我带你一起划分了前端的常识内容，前端的基础知识分成 JavaScript、HTML、CSS 以及浏览器四大重点模块，每个模块也别离有本人的技术重点。你能够在框架中，筛选你最须要的前端常识，按需学习。
当然，这篇文章最重要的是，我心愿能帮你建设一个了解前端的全景图。这样，任何时候，你都可能体系地思考问题，剖析问题。
你感觉你的划分跟我一样吗，你还有其余的想法，你感觉是否有想理解的常识不在其中，更多内容请查看：开发者网站