01 关于前端开发

起源，架构，变迁
应用领域
语言，框架，工具
学习路线

起源，架构，变迁

起源

创始人：Tim Berners-Lee

“Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything.”

有种万物互联的感觉。

小问题：我们现在常常说的“上网”，到底上的是什么网？ -- 因特网。

架构

1989年诞生时，Web由三种技术构成:

HTML
HTTP
URL HTTP根据URL向指定服务器发送请求，获取HTML文件后再浏览器上渲染出来。 CSS和JavaScript是几年之后才出现的。

变迁：（没想到jQuery已经这么老了吗？）

前端应用的领域

To Business：就是企业级应用。一般是大型机构，银行等等用于提供服务的。比如字节的火山引擎，以及各类的广告平台。
To Customer：老百姓的应用。比如门户网站，在线教育，新闻资讯等等。
To Developer：开发者的应用。模块化，打包，编译，调试，运维都离不开工具的支持。主要为了提高开发效率。eg：vscode。

浏览器：桌面浏览器（谷歌，IE，Opera，火狐...）和移动端（安卓），

服务器：node.js，Express.js ， Koa (下一代的 Node.js 的 Web 框架)

终端和跨端

命令行/终端
- Webpack CLI
- Babel CLI
- Vue CLI
- React CLI
桌面跨端
- Electron
- NW.js

语言，框架，工具

语言

WebAssembly：一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

结合C++，C ， Rust 或其他高级语言编写程序，通过二进制工具转化成类汇编的形式，再去运行。

问题：为什么WebAssembly比JavaScript快？

文件加载：WebAssembly文件体积更小，所以下载速度更快。
解析：解码 WebAssembly比解析JavaScript要快。
编译和优化：编译和优化所需的时间较少，因为在将文件推送到服务器之前已经进行了更多优化，JavaScript需要为动态类型多次编译代码。
重新优化：WebAssembly代码不需要重新优化，因为编译器有足够的信息可以在第一次运行时获得正确的代码。
执行：执行可以更快，WebAssembly 指令更接近机器码。
垃圾回收：WebAssembly不直接支持垃圾回收，垃圾回收都是手动控制的，所以比自动垃圾回收效率更高。

框架

了解框架之前，先了解作者。下图对应的都是作者名字。

浏览器，网络，服务器（图书推荐）

浏览器：

《深入理解现代浏览器》：图文并茂，原理性的描述较多，需要反复阅读。

网络：(点击下图可链接到MDN HTTP)

前端学习路线图

前端路线，后端路线，DevOps,Golang路线...全都在--> roadmap.sh

前端的路线太长，就看个起点吧：

这里有个亮点就是，当点击其中一个知识点，会出现相关的文档或者网站来提供帮助，比如我点了CSS的布局Making Layouts，弹出右侧框：

点第一个 Pratice Flexbox，好家伙，直接开始小青蛙闯关！ (讲真，还挺好玩😋)

02. 关于Web标准

了解Web标准，对于把握前端趋势非常重要！

Web标准组织

W3C: World Wide Web Consortium
Ecma: Ecma International
WHATWG: Web Hypertext Application Technology Working Group
IETF: Internet Engineering Task Force

W3C

➢ 官网: www.w3.org

➢ Github: github.com/w3c

➢ 规范查询: www.w3.org/TR （TR:technique report）

W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM

Ecma TC39

➢ 官网: www.ecma-international.org

➢ TC39: tc39.es

➢ Github: github.com/tc39

➢ Discourse: es.discourse.group

主要推行：ECMAScript，比如最新的标准（21年12月）是ECMA-420

WHATWG

➢ 官网: whatwg.org/

➢ Github: github.com/whatwg

➢ 规范查询: spec.whatwg.org/

主要推行HTML标准，当前最新的是22年1月14日规范

lETF

➢ 官网: www.ietf.org/

➢ Github: github.com/ietf

主要推行互联网技术规范（比如HTTP,TCP），当前最新的是RFC3935

W3C与Ecma会员

W3C目前在全球有457家会员，其中北航总部(中国区)会员47家，Ecma的AM (Associate Member) 会员目前有18家，中国公司有字节跳动、360、阿里、华为、腾讯等5家。

W3C流程

W3C规范流程：

CR:候选 PR：提议 REC：推荐

个人提交流程：

建议说明文档，动机，使用场景；
找到对应的社区/小组，提交给小组（github/会议）；
写Web IDL，将来的接口设计；
描述每一步的API实现的算法；
使用github，markdown等工具；
提早联系w3ctag专家评审；
写一些测试用例。

TC39流程

规范流程：