这是我参与「第四届青训营 」笔记创作活动的的第10天

Web标准与前端开发

大家好，这里是最近忙于写代码鸽了几天的Vic，这几天补一下之前的笔记，今天给大家带来Web标准与前端开发的相关笔记。

在这里首先介绍前端开发的相关概念:

前端开发

前端开发的应用领域从面向对象来看分为三种，分别为 to b、to c、to d。to b 指的是“to business”，即面向企业，为企业提供服务；to c 指的是“to customer”，即面向普通用户；to d 指的是“to developer”，即面向开发者。

下面从运营环境的角度来介绍一下前端开发的应用场景，前端开发的应用场景，首当其冲必然是浏览器了，目前来说浏览器分为桌面浏览器和移动浏览器以及移动APP中的WebView。其中桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器，然而随着谷歌Chromium开源项目的不断发展，目前实际上只有Chrome、Safari和Firefox这三个。移动浏览器主要是Chrome、Safari以及国内小程序提供商定制的一些浏览器引擎。因此前端开发不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上运行的小程序。接下来介绍服务端的开发，服务端的开发主要是依托于Node.js，目前来说，除了Node.js以外，还有Express、Koa等新的web开发框架，值得注意的是Node.js的作者 Ryan Dahl 在2018年又写了一个新的JavaScript安全运行时Deno。我们也可以在前端开发中开发终端（即命令行）和跨端，典型的命令行工具有Webpack、Babel、React、Vue的CLI版本，桌面跨端主要有Electron和NW.js，我们常用的编码环境VSCode就是基于Electron开发的，移动跨端则主要有React Native、Flutter。

接下来聊一下前端开发的相关语言、框架和工具。首先聊语言，HTML、CSS和JavaScript这三门语言自然不必多说，这里主要介绍一下WebAssembly（WASM），这是一种运行在现代浏览器中的新型代码，它的主要作用是使得C/C++等语言编写的程序经过编译后，能够以接近原生应用的运行速度在web平台上进行运行。接下来，聊一聊前端的框架，前端的框架就比较多了，诸如node.js、react、Vue等，在这里不一一介绍，附上一张图片，老师在课堂上的建议是关注框架的作者。

下面介绍一下前端开发中的浏览器、网络、服务器。

浏览器的部分可以参考这篇文章进行学习：深入理解现代浏览器

这篇文章以Chrome浏览器为例主要讲解了现代浏览器的工作原理，分为四个部分，分别为：架构、导航、渲染、交互。

在这里贴上自己阅读之后画的一个思维导图：

网络和服务器的部分可以参考这篇文章进行学习：An overview of HTTP

在这里建议阅读英文版，因为中文版有一些图片缺失的问题。

在课程中，老师也贴出了前端的学习路线，在这里也一并附上链接。这个前端路线看着比较吓人，但是我觉得并没有必要追求很短时间的掌握，结合实际使用，慢慢学习就好。

Web 标准

Web标准部分这里就不打算长篇大论了，这个部分主要就是一些概念性的东西。

Web标准组织(同时也贴上对应的GitHub链接)：W3C、Ecma、WHATWG、IETF

接下来介绍各规范制定流程：

W3C：

• WD：Working Draft，工作草案；
• CR：Candiate Recommendation，候选推荐；
• PR：Proposed Recommendation，提议推荐；
• REC：Recommendation，推荐标准。

需要注意的是推荐标准就是W3C标准的最终形态，不是强制性标准。

流程图如下：

W3C规范从草案到正式发布通常涉及以下几个方面：

• Explainer：建议说明文档
• Find the right community/group：找到合适的社区或小组，把建议文档提交到社区或小组里充分讨论
• Web IDL for APIs：IDL（接口描述语言），用于描述API的一种标准方式
• Step-by-step algorithms：分步算法，就是要把算法步骤描述清楚
• GitHub, Markdown, respec, bikeshed, etc：这些都是工具
• Get an early review w3ctag/design-review：事先请TAG（技术架构组）进行设计评审
• Write web-platform-tests（WPT）tests：编写WPT测试

Ecma：

负责制定EcmaScript规范的是TC39，其制定流程如下：

• strawman，稻草人，以任何形式提交的想法
• proposal，提案，特性的正式建议
• draft，草案，具有语法和语义的描述
• candidate，候选，规范文本完备，有了两个实现
• finished，完成，可以成为标准，通过单元测试

W3C会议有两个重要的年度大会AC和TPAC，此外还有若干工作组会议。

Ecma会议则有年度大会GA以及每一到两个月的TC39会议。