前端系统学习(一)

作为一个java开发工程师，由于实际工作中内容却有大部分都在前端页面部分，并且在开发过程中越发感受到前端知识的欠缺，不仅做不到熟练的实现一个漂亮的页面，同时也在页面的编写，优化及bug排查工作上显得效率低下，浪费了不少时间。

总结原因，除了工作经验的不足，更本质的在于没有一个系统的前端知识框架。

虽然个人在职业定位上偏向后端，但花费时间和精力打下一个对于前端的整体知识框架的基础还是有必要的，一是在现阶段的工作来说，避免有明显的短板很重要，二是现在大部分后端岗位实际也要兼顾着开发页面，为了提高工作效率是有必要的。

所以下定决心花费一些时间来学习下前端知识，学习的重点也在于系统二字。

前端的知识，基础包含了三大部分。 JavaScript 语言、CSS 和 HTML以及浏览器的实现原理和 API。

图片发自App

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

文法分为词法、语法。语法和语义基本是一一对应关系，在 JavaScript 标准中有一份语法定义表。

运行时分为数据结构和算法：数据结构包含类型和实例。

类型就是它的 7 种基本类型和 7 种语言类型。

实例，对 JavaScript 来说类似基础库，JavaScipt 的内置对象多达 150 以上。

算法，就是 JavaScript 的执行过程。执行过程(算法)从大结构到小结构的角度，包括从最顶层的程序与模块、事件循环和微任务，到函数、再到语句级的执行。

图片发自App

HTML 的标签可以分为很多种。

标签分成下面几种。

文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；如 title、meta、style、link、base 。

语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；如 section、nav。

链接：提供到文档内和文档外的链接；

替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；如img、video、audio。

表单：用于填写和提交信息的一类标签；如 input、button。

表格：表头、表尾、单元格等表格的结构。如table

HTML 作为标记语言跟编程语言不太一样，没有编程语言那么严谨，HTML 重要的语言机制：实体、命名空间。

HTML 的补充标准：ARIA，它是 HTML 的扩展，在可访问性领域，它有至关重要的作用。

CSS

css的学习主要包含两部分，语法和功能。

语法结构，比如 @rule、选择器、单位等等。

功能部分，大致可以分为布局、绘制和交互类。

1.布局：正常流和弹性布局。

2.绘制类：图形相关的和文字相关的绘制。

3.交互类：略

图片发自App

可以按照解析、构建 DOM 树、计算 CSS、渲染、合成和绘制的流程来理解浏览器的工作原理。

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

以上就是对于前端的整体基础知识的框架，也是一个对于前端技术的整体认知。

写在最后，

没人能够记住所有的知识，前端知识无比庞杂，不可避免会遇到一个记不住的知识，当有了一个知识框架，至少做到能快速定位到它在知识架构中的位置，联想到相关的知识，知道如何快速查找资料，相比零散的去记忆知识点，一定是更为科学的学习方法。