前言所谓知识架构，可以理解为知识的“目录”或索引，可以帮助我们整理零散的知识，更容易记住一些难以记住的点。它还可以帮助我们发现一些知识盲点。当然，知识结构有利也有弊，最重要的是逻辑性和完整性。前端的基础知识大体上可以分为基础部分和实战部分。基础部分包括JavaScript语言（模块一）、CSS与HTML（模块二）、浏览器实现原理与API（模块三）。这三个模块涵盖了前端工程师需要掌握的所有知识。实践部分包括性能、工具链、持续集成、构建系统、架构和基础库。JavaScript在JavaScript模块中，首先我们可以按照语法、语义和运行时对语言进行拆分，这符合编程语言的一般规律：用一定的词法和语法来表达一定的语义，从而对运行时进行操作。接下来，我们按照程序的一般规则将运行时分为数据结构和算法：数据结构包括类型和实例（JavaScript的类型系统是它的7种基本类型和7种语言类型，实例是它的内置对象部分).所谓算法就是JavaScript的执行过程。HTML和CSS知识点在HTML部分。我们将根据功能和语言来划分它的知识。HTML的功能主要由标签承担，因此我们可以对标签进行分类：文档元信息：通常出现在head标签中元素包含一些描述文档本身的信息；语义关联：扩展纯文本，表达文章结构，不同语言元素的标签；链接：提供文档内外的链接；替换标签：引入声音、图片、视频等外部元素替换自身的一类标签；表单：一种用于填写和提交信息的标签；form：表头、表尾和单元格的结构。HTML是一种标记语言，它有两个重要的语言机制：实体和命名空间。HTML的补充标准：ARIA是HTML的扩展，在可访问性领域起着至关重要的作用。CSS部分从语言和功能两个角度来划分。语言部分，包含了CSS的各种语法结构，如@rule、选择器、单元等。功能部分大致分为布局、绘图和交互。布局类中最常用的两种布局：普通流和弹性布局。绘图分为图形相关绘图和文字相关绘图。最后还有动画和其他交互。浏览器的实现原理和API浏览器的实现原理是深入理解API的基础。从一般的浏览器设计出发，可以按照解析、构建DOM树、计算CSS、渲染、合成、绘图等过程来分析浏览器的工作原理。API部分，首先从W3C的零散标准中挑选出几个大的API，主要包括：事件、DOM、CSSOM，分别涵盖了交互、语义和可视化效果，是我们工作主要内容中用到的。至于其他的API，可以通过了解Chrome已经实现的API与W3C标准的对应关系及其生成过程来覆盖其他部分。前端工程实践性能首先我们来谈谈性能。对于任何一个前端团队来说，性能都是其价值的核心指标。从早年“重构”的实践开始，前端就有通过性能证明自身价值的传统。工具链对于一个高效、协作良好的前端团队来说，一致的工具链是不可或缺的保障。工具链作为开发阶段的切入点，可以与性能、发布、持续集成等系统联动，成为团队技术管理的基础。我们需要了解工具链在企业中的构建思路。持续集成过去，持续集成的概念和理论主要针对软件开发，但对于前端来说，持续集成是一个全新的话题。前端的持续集成提出了一些构建思路。搭建系统的前端工作往往是繁杂的。对于高度重复、模块化的业务需求，传统的手工开发已经不适用。搭建系统是大多数大型前端团队的选择。我们需要了解一些常见的建筑系统类型。架构和基础库软件架构师主要解决功能复杂的问题，服务端架构师主要解决高流量的问题，而前端是一个页面之间自然解耦，分散在用户端的系统，但是前端-端架构也有自己需要解决的问题。前端需求量大，专业人才稀缺，而且由于前端本身运行在浏览器中，需要做大量的兼容性工作。因此，前端架构的主要职责是兼容、复用和能力扩展。我们需要了解前端架构工作的一些思路和切入点。整体基础知识框架图有一个完整的知识框架，以后遇到的任何前端基础知识都可以在这个知识框架中找到落脚点，从而能够系统地思考和分析问题。对于有体系、有来源的知识，宜从技术背景、原理、设计等方面入手，将知识内容呈现出来，便于系统学习和理解。比如JavaScript中的object，CSS中的typography等。对于零散的知识，适合使用一些方法来制作知识图谱，比如将知识结构组织成表格或者脑图的形式。这样你就可以记住一个大概的思路，需要的时候再去查，比如JavaScript的词汇表，HTML中的所有标签，浏览器中的API。参考资料极客时间《重学前端》，作者：冬天
