关于前端开发
起源、架构、变迁
前端应用的领域
-
To B
-
To C
- 电商平台
- 在线教育
-
To D
- 开发工具
- 框架
- 模块化
服务器
- node.js
- express.js
- koa
终端和跨端
命令行/终端：
- Webpack CLI
- Babel CLI
- Vue CLI
- React CLI
桌面跨端：
- Electron
- NW.js
移动跨端：
- React Native
- Flutter
语言、框架、工具
前端学习路线图
关于Web标准
标准组织
- W3C
- Ecma
- WHATWG
- IETF
HTTP协议
报文
| 常用请求头 | |
|---|---|
| Accpet | 接收类型，表示浏览器支持的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 | / |
| Last-Modified | / |
| Expires | / |
| Max-age | / |
| ETag | 资源的特定版本的标识符，Etags类似于指纹 |
| Set-Cookie | 设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端 |
| Server | 服务器的一些相关信息 |
| Access-Control-Allow-Origin | 服务器允许的请求Origin头部（比如为*） |
cookie
| Set-Cookie 相关字段 | |||
|---|---|---|---|
| Name=value | 各种cookie的名称和值 | ||
| Expires=Date | Cookie的有效期，缺省时Cookie仅在浏览器关闭之前有效。 | ||
| Path=Path | 限制指定Cookie的发送范围的文件目录，默认为当前 | ||
| Domain=domain | 限制cookie生效的域名，默认为创建cookie的服务域名 | ||
| secure | 仅在HTTPS安全连接时，才可以发送Cookie | ||
| HttpOnly | JavaScript脚本无法获得Cookie | ||
| SameSite=[None | Strict | Lax] | None：同站、跨站请求都可以发送； Strict：仅在同站发送； Lax：允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送 |
发展
HTTP/2 概述
更快、更稳定、更简单
帧：HTTP/2通信的最小单位。每个帧都包含帧头，至少也会标识出当前帧所属的数据流。【二进制】
消息：与逻辑请求或响应消息对应的完整的一系列帧。
数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。
HTTP/2连接都是永久的，而且仅需要每个来源一个连接。
具有流控制——阻止发送方向接收方发送大量数据的机制。
鉴权
Cookie+session
服务端：
Set-Cookie:session=...
客户端：第二次访问时
Cookie:session=...
JWT
服务端：
{woken:'...JWT...'}
客户端：第二次访问时
Authorization:Bearer ...JWT...
