以往开发者只要掌握html、css、javascript三驾马车就能胜任前端工作。现在,除了普通的编码,我们还需要考虑如何优化性能,如何实现跨终端、跨平台的功能,尤其是AI和5G技术的到来,都在加速前端技术的更新,促使开发者continue不能接受新的技术标准。“学什么”和“怎么学”其实是我们必须着力解决的问题。所以,今天我就为大家梳理一下前端知识框架,帮助大家对知识点进行重新遍历,更容易在学习中查漏补缺。我们先来看看什么是知识架构?我们可以把它理解为知识的“目录”或索引,可以帮助我们整理零散的知识,也可以帮助我们发现一些知识盲点。本文包括JavaScript、CSS和HTML,以及浏览器的实现原理和API。这三个模块涵盖了一个前端工程师需要掌握的所有知识。JavaScript知识架构图在JavaScript模块中,我们可以先将语言按照语法、语义和运行时进行拆分,这符合编程语言的一般规律:用一定的词法和语法来表达一定的语义,从而对运行时进行操作。在这里,小编建了一个前端学习交流按钮群:132667127,自己整理的最新前端资料和进阶开发教程。如果愿意,可以进群一起学习交流。运行时可分为数据结构和算法部分——数据结构包含类型和实例(内置对象),算法是执行程序。执行过程应该从最顶层的事件循环和微任务,到函数,然后到语句级执行。语法和语义之间基本上是一一对应的。JavaScript标准中有一个语法定义表,建议随时拿出来看看。HTML和CSS知识架构图在HTML部分,我们按照功能和语言来划分它的知识。HTML的功能主要由标签来承担,所以我们首先要对标签进行分类。图中元素后面的类别就是我们根据标签承担的不同功能来划分的类别。除了标签之外,您还应该将HTML理解为一种语言。您必须掌握基本的HTML语法和几种重要的语言机制:实体和命名空间。CSS部分可以按语言和功能划分。语言部分,@rule,selector,unit是要重点关注的三个部分。在功能部分,你可以专注于布局(正常流和灵活布局)、绘图(图形和文本)、交互类。浏览器的实现原理和API浏览器的实现原理是我们深入理解API的基础。从一般的浏览器设计入手,按照解析、构建DOM树、计算CSS、渲染、合成和绘图的过程来学习浏览器的工作原理。API部分,可以从W3C分散的标准中挑选几个大的API进行详细讲解,主要包括:事件、DOM、CSSOM,分别涵盖了交互、语义、可见效果。使用的主要内容。
