《重学前端》笔记: 开篇

开篇词 + 架构路线 + 学习路径

开篇词 | 从今天起，重新理解前端

• 前端发展史：从青铜到黄金时代

  1. 前端的史前记忆：“青铜时代”Web 1.0（静态网页）到 Web 2.0（动态网页）

  2. 进入发展期的前端：“白银时代”

  3. 从前端到“全端”：“黄金时代”

• 前端开发之痛：散点自学 + 基础不牢

明确你的前端学习路线与方法

• 散点自学 + 基础不牢 导致的问题

  • 基础知识的欠缺会让你束手束脚，更限制你解决问题的思路

  • 技术上存在短板，就会导致前端开发者的上升通道不甚顺畅

  • 面临技术发展问题带来的挑战: 拿 JavaScript 标准来说，ES6

学习路径与学习方法

• 0 基础入门的同学

  • 《JavaScript 高级程序设计》

  • 《精通 CSS》

  • MDN

• 课程目标

  • 带你摸索出适合自己的前端学习方法；

  • 帮助你建立起前端技术的知识架构；

  • 让你理解前端技术背后的核心思想。

两个前端学习方法

• 第一个方法：建立知识架构

什么叫做知识架构？

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

知识的架构是有优劣之分的，最重要的就是逻辑性和完备性

• 第二个方法：追本溯源

列一份前端知识架构图

• 课程目标

  • 把无法通过查阅解决的原理和背景讲清楚

  • 把不方便查阅和记忆的内容整理好

架构图

Javascript语言

用一定的词法和语法，表达一定语义，从而操作运行时。

• 运行时

  • 数据结构

    • 类型

      • 对象

  • 实例

    • 应用和机制

• 执行过程(算法)

  • 事件循环

  • 微任务的执行

  • 函数的执行

  • 语句级的执行

• 文法

  • 词法

  • 语法

• 语义

HTML

• 元素

  • 文档元信息: 通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；

  • 语义相关内容: 扩展了纯文本，表达文章结构、不同语言要素的标签；

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

  • 替换型元素: 引入声音、图片、视频等外部元素替换自身的一类标签；

  • 表单: 用于填写和提交信息的一类标签；

  • 表格: 表头、表尾、单元格等表格的结构。

  • 总集:

• 语言

  • 实体

  • 命名空间

• 补充标准

  • aria

CSS

• 语言

  • @rule

  • 选择器

  • 单位

• 功能

  • 布局

    • 正常流

    • 弹性布局

  • 绘制

    • 颜色和形状

    • 文字相关

• 交互

  • 动画

  • 其他交互

浏览器的实现原理和API

• 实现原理

  • 解析

  • 构建DOM树

  • 计算CSS

  • 渲染, 合成和绘制

• API

  • DOM

  • CSSOM

  • 事件

  • API总集

前端工程实践

• 性能

• 工具链

  • 企业中工具链的建设思路

• 持续集成

• 搭建系统

• 架构与基础库