JS 知识架构图

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

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

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

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

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

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

JavaScript知识架构图

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

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

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

HTML 和 CSS知识架构图

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

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

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

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

浏览器的实现原理和API

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

Expected indentation of 10 spaces but found 20

遇到过两次这个问题,第一次是用vue做商城时,第二次是做mpvue项目时,这是因为安装vue-cli时,直接安装了ESLint。

27730
来自专栏大白技术控的技术自留地

ASCIIMathML技术简介~

ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。

12040
来自专栏码匠的流水账

聊聊flink的slot.idle.timeout配置

flink-release-1.7.2/flink-core/src/main/java/org/apache/flink/configuration/JobM...

20430
来自专栏大白技术控的技术自留地

Dreamweaver PHP 图片上传:

在 Dreamweaver 中,上传图片到数据可以比较容易的实现,但是上传到一个目录,需要借助于 PHP 代码来实现。我的学生大多没有 PHP 的编程经验,所以...

39120
来自专栏大白技术控的技术自留地

Chorme浏览器渲染MathJax时出现竖线的解决方法

新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

12420
来自专栏华来四Azure混合云

在Azure Stack上部署Kubernetes

要参加微信课堂以及日常技术交流,请给我们发微信(微信号:markpah),请注明加入以下哪个群:

13720
来自专栏JavaEdge

Spring Boot 配置接口 WebMvcConfigurer

WebMvcConfigurer配置类其实是Spring内部的一种配置方式,采用JavaBean的形式来代替传统的xml配置文件形式进行针对框架个性化定制 基...

2.2K50
来自专栏Fundebug

详解Vue Native

译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

12720
来自专栏大白技术控的技术自留地

解除谷歌浏览器Chrome无法安装扩展插件的限制

今天将谷歌浏览器升级到了最新版本,在安装扩展脚本的时候,却发现Chrome 21+系列增加了对扩展插件安装的限制, 用户只能安装谷歌浏览器(Chrome Sto...

21120
来自专栏清晨我上码

第十八节 netty源码分析之 pipleline和handler以及pipeline的数据流向02

下面是AbstractNioChannel的fulfillConnectPromise具体如下,

11130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励