共计 1848 个字符，预计需要花费 5 分钟才能阅读完成。
前言
所谓常识架构，能够了解为常识的“目录”或者索引，它可能帮忙咱们把零散的常识组织起来，更轻松地记忆一些本来难以记住的点。也可能帮忙咱们发现一些常识上的盲区。
当然，常识的架构是有优劣之分的，最重要的就是逻辑性和齐备性。
前端的基础知识在总体上能够分成根底局部和实际局部。
- 根底局部蕴含了 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