《重学前端》笔记: 开篇
开篇词 + 架构路线 + 学习路径
开篇词 | 从今天起，重新理解前端
-
前端发展史：从青铜到黄金时代
前端的史前记忆：“青铜时代”Web 1.0（静态网页）到 Web 2.0（动态网页）
进入发展期的前端：“白银时代”
从前端到“全端”：“黄金时代”
前端开发之痛：散点自学 + 基础不牢
明确你的前端学习路线与方法
-
散点自学 + 基础不牢 导致的问题
基础知识的欠缺会让你束手束脚，更限制你解决问题的思路
技术上存在短板，就会导致前端开发者的上升通道不甚顺畅
面临技术发展问题带来的挑战: 拿 JavaScript 标准来说，ES6
学习路径与学习方法
-
0 基础入门的同学
《JavaScript 高级程序设计》
《精通 CSS》
MDN
-
课程目标
带你摸索出适合自己的前端学习方法；
帮助你建立起前端技术的知识架构；
让你理解前端技术背后的核心思想。
两个前端学习方法
- 第一个方法：建立知识架构
什么叫做知识架构？
我们可以把它理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区。
知识的架构是有优劣之分的，最重要的就是逻辑性和完备性
- 第二个方法：追本溯源
列一份前端知识架构图
-
课程目标
把无法通过查阅解决的原理和背景讲清楚
把不方便查阅和记忆的内容整理好
架构图
Javascript语言
用一定的词法和语法，表达一定语义，从而操作运行时。
-
运行时
-
数据结构
-
类型
- 对象
-
-
实例
- 应用和机制
-
-
执行过程(算法)
事件循环
微任务的执行
函数的执行
语句级的执行
-
文法
词法
语法
语义
HTML
-
元素
文档元信息: 通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；
语义相关内容: 扩展了纯文本，表达文章结构、不同语言要素的标签；
链接: 提供到文档内和文档外的链接；
替换型元素: 引入声音、图片、视频等外部元素替换自身的一类标签；
表单: 用于填写和提交信息的一类标签；
表格: 表头、表尾、单元格等表格的结构。
总集:
-
语言
实体
命名空间
-
补充标准
- aria
CSS
-
语言
@rule
选择器
单位
-
功能
-
布局
正常流
弹性布局
-
绘制
颜色和形状
文字相关
-
-
交互
动画
其他交互
浏览器的实现原理和API
-
实现原理
解析
构建DOM树
计算CSS
渲染, 合成和绘制
-
API
DOM
CSSOM
事件
API总集
前端工程实践
性能
-
工具链
- 企业中工具链的建设思路
持续集成
搭建系统
架构与基础库
