Web前端基础怎么学? JavaScript、html、css知识架构图
以前开发者只要掌握 html、css、javascript 三驾马车就能胜任一份前端的工作了。而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端、跨平台实现功能,尤其是 ai、5g 技术的来临,都在加快前端技术的更新,也在逼促开发者要不停的学习,不能的接受新的技术标准。
“学什么”“怎么学”其实是我们要着重解决的问题。所以,今天给你梳理一下前端知识框架,帮你把知识点重新做个遍历,查缺补漏的学习更轻松。
我们先来看什么叫做知识架构?
我们可以把它理解为知识的“目录”或者索引,它能够帮助我们把零散的知识组织起来,也能够帮助我们发现一些知识上的盲区。
本文包含了javascript、css和html以及浏览器的实现原理和api,这三个模块涵盖了一个前端工程师所需要掌握的全部知识。
javascript知识构架图
在javascript的模块中,首先我们可以把语言按照文法、语义和运行时来拆分,这符合编程语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时。
运行时可以分为数据结构和算法部分——数据结构包含类型和实例(内置对象),算法是执行过程。执行过程应按照从最顶层的事件循环和微任务,到函数、再到语句级的执行。
语法和语义基本是一一对应关系,在javascript标准中有一份语法定义表,建议随时拿出来看一看
htnl和css知识构架图
在html的部分,我们按照功能和语言来划分它的知识,html的功能主要由标签来承担,所以首先要把标签做一些分类。图中元素后面的分类,便是我们按照承担的不同功能,把标签分成的几个类别。
除了标签之外,你还应该把html当作一门语言来了解下。较基础的html的语法和几个重要的语言机制:实体、命名空间,你一定要掌握。
css部分,可以按照语言和功能划分。
语言部分,@rule、选择器、单位是三个要关注的部分。
功能部分,可以重点关注布局(正常流和弹性布局)、绘制(图形和文字)以及交互类。
浏览器的实现原理和api
浏览器的实现原理,是我们深入理解的apl的基础
从一般的浏览器设计出发,按照解析、构建dom树、计算css、渲染、合成和绘制的流程来学习浏览器的工作原理。
在api部分,可以从w3c零散的标准中挑选几个大块的api来详细讲解,主要有:事件、dom、cssom几个部分,他们分别覆盖了交互、语义和可见效果,这是我们工作中用到的主要内容。
一个人学习会有迷茫,动力不足。这里推荐一下我的前端学习交流qun:四八四,七五七,七六零,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的html+css+js【炫酷特效,游戏,插件封装,设计模式】到移动端html5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
上一篇: Matlab访问者模式
推荐阅读
-
Web前端基础怎么学? JavaScript、html、css知识架构图
-
零基础也能看懂!写给设计师的前端小知识之各司其职_html/css_WEB-ITnose
-
零基础也能看懂!写给设计师的前端小知识之各司其职_html/css_WEB-ITnose
-
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点(三)_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点(二)_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点_html/css_WEB-ITnose
-
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点(三)_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点_html/css_WEB-ITnose