JS 知识架构图

分手后的思念是犯贱 2022-02-21 00:20 91阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控s和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

# **一** #

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

# **二** #

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

这份知识框架，也是极客时间《重学前端》专栏里的一些核心内容，十分珍贵。

**我们先来看什么叫做知识架构？**

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

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

![Image 1][]

JavaScript知识架构图

在JavaScript的模块中，首先我们可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时。

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

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

![Image 1][]

HTML 和 CSS知识架构图

在HTML的部分，我们按照功能和语言来划分它的知识，HTML的功能主要由标签来承担，所以首先要把标签做一些分类。图中元素后面的分类，便是我们按照承担的不同功能，把标签分成的几个类别。

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

# **三** #

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

*  语言部分，@rule、选择器、单位是三个要关注的部分。
 *  功能部分，可以重点关注布局（正常流和弹性布局）、绘制（图形和文字）以及交互类。

![Image 1][]

浏览器的实现原理和API

浏览器的实现原理，是我们深入理解 API 的基础。

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTI2NTQy_size_16_color_FFFFFF_t_70][]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTI2NTQy_size_16_color_FFFFFF_t_70]: /images/20220221/7c877559d9fd45dd904c3e24fe3a84fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关【架构师】应用架构图

基础结构解决的主要问题包括：如何进行技术层面的分层、开发框架的选择、开发语言的选择、涉及非功能性需求的技术选择。通过产品架构图中得到的应用系统划分，按照系统间的调用关系，...

忘是亡心i/ 2024年04月24日 15:03/ 0 赞/ 116 阅读

相关有关架构图你需要了解的基础知识

一、什么是架构图？架构从字面意思上，是源于古代的建筑术语。把架构拆分成两个字“架”和“构”。“架”是“加”和“木”的结合，把木头加起来、连接起来就是架。“构”就是结构的

朱雀/ 2023年01月08日 08:03/ 0 赞/ 236 阅读

相关全新的知识架构图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小灰灰/ 2022年12月19日 08:52/ 0 赞/ 31 阅读

相关架构图

[https://v3.processon.com/view/60377c5c1e085364c6739021?fromnew=1][https_v3.processon.co

红太狼/ 2022年10月22日 07:40/ 0 赞/ 453 阅读

相关操作系统架构、知识图谱，全在这里！

都说操作系统（简称 OS ），是程序员的三大浪漫之一，我们经常会用“灵魂、大脑、内核、基石”等词来形容它，足以见得它对计算机而言有多么重要。在实际工作中也确实如此，很

- 日理万妓/ 2022年09月05日 12:44/ 0 赞/ 213 阅读

相关架构学习知识体系图

内容过多，请点击看大图！ ![20180606230839351][] [20180606230839351]: /images/20220523/b8ab652f484

落日映苍穹つ/ 2022年05月23日 10:07/ 0 赞/ 300 阅读

相关我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表...

[我收藏的技术知识图（每张都是大图）][Link 1] [![o_html5details.png][]HTML5][o_html5details.png_HTML5][![

柔情只为你懂/ 2022年03月31日 13:46/ 0 赞/ 336 阅读

相关技术架构图-银行业务架构图解

![5bed149ce4b01c7467bbcc98.png][] [5bed149ce4b01c7467bbcc98.png]: /images/20220322/d71

柔情只为你懂/ 2022年03月22日 05:58/ 0 赞/ 1367 阅读

相关 JS 知识架构图

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控s和Java错误监控。真的是一个很好用的错误监控费服务，众多

分手后的思念是犯贱/ 2022年02月21日 00:20/ 0 赞/ 91 阅读

相关架构图

链接：[https://www.processon.com/view/link/59ccc3f0e4b0f600882fa4fd][https_www.processon.co

逃离我推掉我的手/ 2021年12月13日 01:19/ 0 赞/ 383 阅读