Web标准和前端开发 | 青训营笔记

135 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第6天,今天学习关于Web标准和前端开发的内容。

前端开发

前端开发的起源

前端开发的起源是由1989年TimBernersLee\color{red}{Tim Berners-Lee}在欧洲的物理研究机构CERN\color{red}{CERN}提出的一个建议:Information\color{red}{《Information} Management:\color{red}{Management:} A\color{red}{A} Proposal\color{red}{Proposal》}

Web架构

1989年诞生时,Web由HTML(超文本标记语言)HTTP(超文本传输协议)URL(统一资源定位符)三种技术构成,而我们现在使用的CSS(层叠样式表)JavaScript是之后几年才出现的。

Web基本架构

Web基本架构图

前端开发的语言、框架、工具

语言

在web起步阶段,前端开发仅有HTML一种语言,后来慢慢地加入了CSS和JavaScript分别对页面的样式和交互进行处理;直到2019年12月5日W3C发布了WebAssembly\color{red}{WebAssembly}标准,此时在浏览器中可以直接运行的语言扩展为4门。
WebAssembly\color{red}{WebAssembly}是一种低级的类汇编语言,因此可以加快代码运行速度,并且由C++、C、Rust等高级语言编写而成的程序均可以编译为WebAssembly在网页中运行,可以使浏览器完成所需性能极高的应用。

框架

当前所流行的开发框架包括Node.jskoaReactVueTypeScriptgitBABELwebpackESbuild等。

工具

浏览器

现在的浏览器主要以chrome架构为主流实现方式。最上层是浏览器进程:负责协调承担各项工作的其他进程,比如实用程序进程、渲染器进程、GPU进程、插件进程等。 68747470733a2f2f70302e73736c2e7168696d672e636f6d2f743031623636646639393030623666343661362e706e67.png

浏览器架构图

其中:

  • 浏览器进程: 控制浏览器的主框架部分,包括地址栏、书签、前进/后退、主页等功能按钮,同时也会处理更高级的例如发送网络请求和访问文件等功能。
  • 渲染器进程: 负责在标签页中显示网站及处理事件。
  • 插件进程: 负责控制网站所使用的所有插件。
  • GPU进程: 开启一个独立的进程用来处理GPU任务。由于GPU需要处理多个应用的请求但是需要在同一页面上绘制图形,所以该进程为独立进程。

【摘自深入理解现代浏览器

网络

Web的基本通信协议为HTTP协议。

HTTP是一种能够获取如HTML这种网络资源的通讯协议;是Web中进行数据交换的基础;是一种client-server协议。

HTTP应用层的协议,通过TCP或者是TLS加密的TCP连接来发送,理论上任何可靠的传输协议都可以使用。所以它不仅用来传输超文本文档,还用来传输图片、视频或者向服务器发送如HTML表单这样的信息;它还可以根据网页需求,仅获取部分Web文档内容更新网页。

HTTP拥有以下性质:
  • HTTP是简单的: HTTP报文能够被人读懂,还允许进行简单的测试。
  • HTTP是可扩展的: HTTP消息头使协议的扩展变得非常容易,只要服务端和客户端的headers达成语义一致即可轻松加入新功能。
  • HTTP 是无状态,有会话的: HTTP的本质是无状态的,可以使用Cookie使该会话获得状态
    • 无状态: 在同一个连接中,用户没有办法在同一个网站中进行连续交互。
    • 有会话: 使用HTTP的Cookie即可解决HTTP无状态的问题。即将用户信息存入Cookie中,在发起HTTP连接时将Cookie添加进头部,则可实现当次会话的多个请求共享上下文信息并达成相同的状态。
HTTP流:

当客户端想要和服务端进行信息交互时,过程表现为下面几步:

  1. 打开一个TCP链接:TCP连接被用来发送一条或多条请求,以及接受响应消息。
  2. 发送一个HTTP报文。
  3. 读取服务端返回的报文信息。
  4. 关闭连接或者为后续请求重用连接。
HTTP报文:

HTTP报文分为两种类型,每种都有其特定的格式

  • 请求
    请求通常由以下元素组成:
    • method:用来定义客户端的行为动作。
    • 要获取的资源的路径。
    • HTTP协议版本号。
    • 对于像POST这样的方法,报文的body中已经包含了发送的资源,这与响应报文的body类似。
  • 响应
    响应通常由以下元素组成:
    • HTTP协议版本号。
    • 状态码:用来告知对应请求的执行情况(成功或失败)以及失败的原因。
    • 状态信息:是非权威的状态码描述信息,可由服务端自行设定。
    • HTTP消息头,与HTTP请求头类似。
    • 可选项:比起请求报文,响应报文中更常见地包含获取的资源body。

【摘自HTTP概述

关于Web标准

Web标准组织

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

W3C规范制定流程

image.png

总结

前端开发的学习过程中不仅需要开发所对应的知识(前端三剑客、前端框架等),也需要理解一些关于浏览器/服务器的运行原理以及架构等内容帮助我们加深对前端开发的理解与认知。