开篇词

前端演进

• “青铜时代”：谷歌基于 Ajax 发布的 Gmail，这标志着 Web 1.0（静态网页）到 Web 2.0（动态网页）的迈进
• “白银时代”：前端逐步从后端分离了出来，代码变得复杂，还需要保存数据、处理数据、生成视图等
• “黄金时代”：随着移动时代的到来，前端职责更加重要，有独立的发布权限，技术更复杂，一些传统软件开发和互联网服务端的方法论逐步移植到前端开发中，并形成前端的工程体系，如持续集成、前后端分离、线上监控等；在架构方面，前端的任务也从简单的解决兼容和风格问题，过渡到提倡组件化和 UI 架构模式，最后形成了新一代的前端框架 React、Vue 和 Angular，他们也在竞争和互相学习中成长。

前端学习方法

关于前端工程师成长，

• 一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论；
• 二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。

本课程内容

1. 分为四部分：

• JavaScript：从文法和运行时的角度去讨论 JavaScript 语言。它们是互相关联的，语义就是文法到运行时之间的桥梁；它们分别又是完备的，任何语言特性都离不开两者
• CSS 和 HTML：侧重从语言和设计思想的角度来讲解
• 浏览器实践：浏览器工作的原理和一些重要的 API，包括 BOM、DOM、CSSOM 和其他一些内容
• 前端综合应用：手淘和淘宝工作中的一些案例讲解

2. 本课程作用

• 带你摸索出适合自己的前端学习方法；
• 帮助你建立起前端技术的知识架构；
• 让你理解前端技术背后的核心思想。

---

学习路线和方法

学习路径

• 0 基础入门，可以读经典的前端教材，如《JavaScript 高级程序设计》《精通 CSS》等书籍，去阅读一些参考性质的网站也是不错的选项，比如MDN。
• 至少已经有了 1 年以上的工作经验，可以学习这个课程

学习方法

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

• 建立知识的“目录”或者索引，帮助我们把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区。
• 建立知识架构最重要的就是逻辑性和完备性。

2. 第二个方法：追本溯源

• 关注技术提出的背景，关注原始的论文，关注作者说的话，找到知识的源头。

---

前端知识框架

目标

1. 参考手册和语言标准

• 参考手册（MDN等）：便于查阅、便于理解，内容全面，
• 语言标准：严谨、无遗漏、无歧义。

2. 本课程有什么不同：

• 目标不同：
  • 把无法通过查阅解决的原理和背景讲清楚
  • 把不方便查阅和记忆的内容整理好。

1.JavaScript：

上面是JavaScript知识架构图，下面具体解释一下。

• 首先可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时。
  • （1）运行时分为数据结构和算法部分：
    • 数据结构包含类型和实例
      • 类型系统就是js的7种基本类型和7种语言类型，
      • 实例就是它的内置对象部分（对象比其它所有类型加起来都要更为复杂）
    • 算法，就是JavaScript的执行过程：按照从大结构到小结构的角度讲解，从最顶层的程序与模块、事件循环和微任务，到函数、再到语句级的执行。从粗到细地了解执行过程
  • （2）文法中的语法和语义基本是一一对应关系
  • （3）语义：不单独讲解。

2.HTML 和 CSS

上面是HTML和CSS的知识架构图，具体解释一下。

1. html

• 介绍标签：按照功能和语言来划分，HTML的功能主要由标签来承担，首先会把标签做一些分类（重点在前四种标签上，表单和表格较少用到，而且基本以查阅型知识为主）：
  • 文档元信息：通常是出现在head标签中的元素，包含了描述文档自身的一些信息；如title、meta、style、link、base，它们用来描述文档的一些基本信息
  • 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；如section、nav的标签，它们在视觉表现上跟div并没有区别，但是各有各的适用场景
  • 链接：提供到文档内和文档外的链接；
  • 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；如img、video、audio之类的，用来引入外部内容
  • 表单：用于填写和提交信息的一类标签，如input、button；
  • 表格：表头、表尾、单元格等表格的结构。
• 介绍HTML的语法和几个重要的语言机制：实体、命名空间（标记语言没那么严谨）
• 介绍下HTML补充标准：ARIA，它是HTML的扩展，在可访问性领域，它有至关重要的作用。

2. CSS 从语言和功能两个角度去介绍

• 语言部分，从大到小介绍CSS的各种语法结构，比如@rule、选择器、单位等等
• 功能部分，可以分为布局、绘制和交互类。
  • 布局类,两个最常用的布局：正常流和弹性布局
  • 绘制类:图形相关的和文字相关的绘制。
  • 动画和其它交互。

浏览器的实现原理和API

上面是浏览器知识架构图，具体看一下。

• 浏览器的实现原理，是深入理解API的基础。
  • 从一般的浏览器设计出发，按照解析、构建DOM树、计算CSS、渲染、合成和绘制的流程来讲解浏览器的工作原理。
• 在API部分，从W3C零散的标准中挑选几个大块的API来详细讲解
  • 事件、DOM、CSSOM几个部分，它们分别覆盖了交互、语义和可见效果，这是我们工作中用到的主要内容。
  • 其他的API：介绍一份Chrome已经实现的API跟W3C标准的对应关系和它的生成过程，来覆盖其它部分。

前端工程实践

• 掌握了前面的基础知识，就基本掌握了做一个前端工程师的底层能力。
• 在前端工程实践模块中，从性能、工具链、持续集成、搭建系统、架构与基础库这几个方向，讲解前端工程实践案例

1. 性能
   • 性能是它价值的核心指标，前端有通过性能证明自己价值的传统。
   • 性能并非细节的堆砌，也不是默默做优化
2. 工具链
   • 探讨企业中工具链的建设思路
   • 一致性的工具链是高效又合作良好的前端团队不可或缺的保障
   • 作为开发阶段的入口，工具链又可以和性能、发布、持续集成等系统链接到一起，成为团队技术管理的基础。
3. 持续集成
   • 持续集成并非一个新概念，但对前端来说，持续集成是一个新的课题（当然对持续集成来说，前端也是一个新课题），比如daily build完全不适用前端，前端代码必须是线上实时可用的。
4. 搭建系统
   • 前端工作往往多而繁杂，针对高重复性、可模块化的业务需求，传统的人工开发不再适用，搭建系统是大部分大型前端团队的选择
5. 架构与基础库
   • 软件架构师主要解决功能复杂性的问题，服务端架构师主要解决高流量问题，而前端是页面间天然解耦，分散在用户端运行的系统，但是前端架构也有自己要解决的问题。
     • 前端需求量大、专业人才稀缺，前端运行在浏览器中，有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。
     • 这些内容几乎是每一个年轻的前端团队成长过程中都会需要的基础设施。

前端的知识体系如下

---

本文为参照 极客时间-《重学前端》课程整理的个人学习笔记，课程中知识点及案例非原创，原课程请参考【原课程链接：https://time.geekbang.org/column/article/77804】