Web前端基础怎么学？html、css、JavaScript 知识架构图

之前开发者只要掌握 HTML、CSS、JavaScript 三驾马车就能胜任一份前端的工做了。而如今除了普通的编码之外，还要考虑如何性能优化，如何跨端、跨平台实现功能，尤为是 AI、5G 技术的来临，都在加快前端技术的更新，也在逼促开发者要不停的学习，不能的接受新的技术标准。

“学什么”“怎么学”实际上是咱们要着重解决的问题。因此，今天给你梳理一下前端知识框架，帮你把知识点从新作个遍历，查缺补漏的学习更轻松。

咱们先来看什么叫作知识架构？

咱们能够把它理解为知识的“目录”或者索引，它可以帮助咱们把零散的知识组织起来，也可以帮助咱们发现一些知识上的盲区。

本文包含了JavaScript、CSS和HTML以及浏览器的实现原理和API，这三个模块涵盖了一个前端工程师所须要掌握的所有知识。

JavaScript知识架构图

在JavaScript的模块中，首先咱们能够把语言按照文法、语义和运行时来拆分，这符合编程语言的通常规律：用必定的词法和语法，表达必定语义，从而操做运行时。

在这里小编建了一个前端学习交流扣扣群：132667127，我本身整理的最新的前端资料和高级开发教程，若是有想须要的，能够加群一块儿学习交流

运行时能够分为数据结构和算法部分——数据结构包含类型和实例（内置对象），算法是执行过程。执行过程应按照从最顶层的事件循环和微任务，到函数、再到语句级的执行。

语法和语义基本是一一对应关系，在JavaScript标准中有一份语法定义表，建议随时拿出来看一看。

HTML 和 CSS知识架构图

在HTML的部分，咱们按照功能和语言来划分它的知识，HTML的功能主要由标签来承担，因此首先要把标签作一些分类。图中元素后面的分类，即是咱们按照承担的不一样功能，把标签分红的几个类别。

除了标签以外，你还应该把HTML看成一门语言来了解下。较基础的HTML的语法和几个重要的语言机制：实体、命名空间，你必定要掌握。

CSS部分，能够按照语言和功能划分。

语言部分，@rule、选择器、单位是三个要关注的部分。

功能部分，能够重点关注布局（正常流和弹性布局）、绘制（图形和文字）以及交互类。

浏览器的实现原理和API

浏览器的实现原理，是咱们深刻理解 API 的基础

从通常的浏览器设计出发，按照解析、构建DOM树、计算CSS、渲染、合成和绘制的流程来学习浏览器的工做原理。

在API部分，能够从W3C零散的标准中挑选几个大块的API来详细讲解，主要有：事件、DOM、CSSOM几个部分，他们分别覆盖了交互、语义和可见效果，这是咱们工做中用到的主要内容。