掘金阅读 ( ) • 2023-02-02 16:27

theme: condensed-night-purple highlight: atelier-cave-dark

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

前端开发的起源、架构、变迁

前端最早诞生于1989年，最早的Web是由HTML、HTTP、URL三种技术构成，而我们现在的CSS和JavaScript都是后来才出现的技术。前端发展至今可以分为三个时代分别是只读时代、体验时代、敏捷时代。

只读时代（1989-2004）
- HTML\css\JavaScript（架构）
  - 单向发布
  - 静态只读
  - 链接跳转
  - 刷新页面
  - 表格对齐元素
  - CGI
体验时代（2005-2010）
- Ajax\Web\jQuery（架构）
  - 动态交互
  - 社交媒体
  - 用户生成内容(UGC)
  - 单页应用(SPA)
  - jQuery
  - YUI
敏捷时代（2010-2021）
- Fetch\Node.js\Webpack（架构）
  - 模块化
  - 组件化
  - 转译(transpiling)
  - 打包(bundling)
  - React.js
  - vue.js

前端的应用领域

To Business（面向公司）
To Customer（面向用户）
To Developer（面型开发者）

前端比较前沿的语言、框架、工具

语言
- HTML、CSS、JavaScript
- WebAssembly
框架、工具
- node.js
- koa
- React
- vue
- Typescript
- git
- babel
- webpack
- esbuild

下面我们来讲讲关于前端的标准

关于Web标准

标准组织

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

关于Web标准

W3C

官网: https://www.w3.org
Github: https://github.eom/w3c
规范查询： https://www.w3.org/TR

Ecma TC39

官网: https:.//www.ecma-international.org
TC39: https://tc39.es
Github: https://qithub.com/tc39
Discourse: https://es.discourse.group

WHATWG

官网: https://whatwg.org/
Github: https://github.com/whatwg
规范查询: https://spec.whatwg.org/

IETF

官网: https://www.ietf.org/
Github: https://github.com/ietf

W3C规范制定流程

Explainer demo (演示Demo)
Find the right community/group (找到合适的组织)
Web IDL for APIs link（API 链接的 Web IDL）
Step-by-step algorithms（逐步算法）
GitHub, Markdown, respec, bikeshed,etc（上传GitHub, Markdown, respec, bikeshed,etc等）
Get an early review w3ctag/design-reviews（获得w3ctag的评估）
Write web-platform-tests (WPT) tests（编写测试）

课后总结

学完Web标准与前端开发的课程后，让我对Web的标准有了更加清晰和深刻的理解。对前端这个岗位有了更清晰的了解。了解到了前端发展的历程，扩宽了我的知识面

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

什么是HTTP？

百度百科的解释:超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而 [9] 消息内容则具有一个类似MIME的格式

总结： HTTP是客户端请求和接收信息资源的文本传输协议

协议分析--发展

持续发展

HTTP/0.9 单行协议
- 请求 GET /mypage.html
- 响应只有 HTML 文档
HTTP/1.0 构建可扩展性
- 增加了 Header
- 有了状态码
- 支持多种文档类型
HTTP/1.1 标准化协议
- 链接复用
- 缓存
- 内容协商
HTTP/2 更优异的表现
- 二进制协议
- 压缩 header
- 服务器推送
HTTP/3 草案

协议分析--报文

Method

Method Explanation GET 请求一个指定资源的表示形式。使用 GET 的请求应该只被用于获取数据 POST 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 PUT 用请求有效载荷替换目标资源的所有当前表示 DELETE 删除指定的资源 HEAD 请求一个与 GET 请求的响相同的响应，但没有响应体 CONNECT 建立一个到由目标资源标识的服务器的隧道 OPTIONS 用于描述目标资源的通信选项 TRACE 沿着到目标资源的路径执行一个消息环回测试 PATCH 用于对资源应用部分修改

特点：

Safe（安全）：不会修改服务器数据的方法， GET、HEAD。OPTIONS
Independent（幂等）：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。所有 Safe 的方法都是 Independent 的。GET、HEAD、OPTIONS、PUT、DELETE

状态码

RESTful API

RESTful API ：一种 API 设计风格；Representational State Transfer

每一个 URI 代表一种资源
客户端与服务器之间，传递这种资源的某种表现层
客户端通过 HTTP method ，对服务器端资源进行操作，实现 ”表现层状态转化“

请求返回码含义 GET /zoos 200 OK 列出所有动物园，服务器成功返回了 POST /zoos 201 CREATED 新建一个动物园，服务器创建成功 PUT /zoos/ID 400 INVALID REQUEST 更新某个指定动物园的信息（提供该动物园的全部信息）用户发出的请求信息有误，服务器没有进行新建或修改数据操作 DELETE /zoos/ID 204 NO CONTENT 删除某个动物园，删除数据成功

常用请求头

请求头含义 Accept 接收类型，表示浏览器支持的 MIME 类型（对标服务器返回的 Content-Type Content-Type 客户端发送出去实体内容的类型 Cache-Control 指定请求和响应遵循的缓存机制，如 no-cache If-Modified-Since 对应服务端的 Last-Modified ，用来匹配看文件是否变动，只能精确到 1s 之内 Expires 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间 Max-age 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存 If-None-Match 对应服务端的 ETag ，用来匹配文件内容是否改变（非常精确） Cookie 有 cookie 并且同域访问时会自动带上 Referer 该页面的来源 URL（适用于所有类型的请求，会精确到详细页面地址，CSRF 拦截常用到这个字段） Origin 最初的请求是从哪里发起的（只会精确到端口），Origin 比 Referer 更尊重隐私 User-Agent 用户客户端的一些必要信息，如 UA 头部等

常用响应头

响应头含义 Content-Type 服务器端返回的实体内容的类型 Cache-Control 指定请求和响应遵循的缓存机制，如 no-cache Last-Modified 请求资源的最后修改时间 Expires 应该在什么时候认为文档已经过期，从而不再缓存它 Max-age 客户端的本地资源应该缓存多少秒，开启了 Cache-Control 后有效 ETag 资源的特定版本的标识符，Etags 类似于指纹 Set-Cookie 设置和页面关联的 cookie ，服务器通过这个头部把 cookie传给客户端 Server 服务器的一些相关信息 Access-Control-Allow-Origin 服务器端允许的请求 Origin 头部（譬如为 * ）

缓存

强缓存

协商缓存

缓存

Cookie

Set-Cookie response

Name=value 各种 cookie 的名称和值 Expires=Data Cookie 的有效期，缺省时 Cookie 仅在浏览器关闭之前有效 Path=Path 限制指定 Cookie 的发送范围的文件目录，默认为当前 Domain=domain 限制 Cookie 生效的域名，默认为创建 Cookie 的服务域名 secure 仅在 HTTPS 安全连接时，才可以发送 Cookie HttpOnly JavaScript 脚本无法获得 Cookie SameSite=[None Strict