第六届360前端星计划_前端常用的 HTTP 知识

主讲人

• 李成银
• 360前端技术专家
• 奇舞团

浏览器在网页中的位置

http在浏览网页中位值.PNG

请求过程

http协议.PNG

HTTP是应用层协议

联网细节交给了通用的传输协议：TCP/UDP

http格式：

• 头信息，请求头和响应头

• response：页面内容

格式简单

请求格式：

响应格式

请求类型：

请求类型	描述
GET	获取一个资源内容
POST	新增一个资源
PUT	更新资源内容
DELETE	删除资源
OPTIONS	根据返回判断是否有对其请求的权限
HEAD	只返回 head，不返回实体内容（主要做测试）
PATCH	更新部分内容

状态码：

状态码	描述
1xx	请求已接受，需要继续处理
2xx	请求已经正确处理
3xx	重定向
4xx	客户端错误
5xx	服务端错误

常见：

状态码	描述
101	切换协议，如：将 HTTP 协议切换为 WebSocket 协议 （聊天室）(将http协议通过101状态码切换成WebSocket 协议)
200	成功
206	返回部分内容，如：大文件下载
301	永久重定向，如：资源更换路径或改名
302	临时重定向，如：当前请求需要登录，临时跳转到登录页
304	资源未修改，不返回实体内容，客户端可直接读取本地缓存内容
400	错误请求
403	拒绝执行，如：无对应的访问权限
404	资源找不到，如：服务器已经删除该资源

413	请求实体过大，如：服务端限制了上传的文件大小
500	服务端内部错误，如：数据处理异常导致报错
502	作为网关或代理服务器时，上游服务器异常
504	作为网关或代理服务器时，上游服务器处理超时

URL

规则：

://:@:/;?#

http://:/?#

ftp://:@:/;

受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符先通过encode再传

Header：

通用header:

*   Date: Tue, 3 Oct 2019 02:16:00 GMT

*   Connection: close

请求:

*   User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

*   Accept: */*

响应:

*   Server: Nginx

*   Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT

实体

*   Content-Type: text/html; charset=utf-8

*   Content-Length: 100

扩展（自定义）

*   X-Powered-By: thinkjs-3.0.4

*   X-Cache: hit

跟其他区分开（X开头）

Cookie

http无状态，利用cookie设置身份

相应通过Set-Cookie设置

格式：

Set-Cookie: =[; =]

如：expires=domain= path=][ secure][ httponly][ samesite=]

响应头里也可以有多个 Set-Cookie(但太大，会影响请求)

cookie安全策略：

• path

• domain (hostonly*)

• expires (max-age)

• secure

• httponly

• SameSite

如果url和规则匹配才携带

• XSS 漏洞盗取 Cookie，设置 httponly避免获取

• CSRF 漏洞，设置 token/samesite

cookie和session关系：

• 服务器侧对应为 Session，基于 Cookie 存放用户信息

• Cookie 有效期为 Session（随浏览器进程退出而失效）

Content-Type

标识返回内容的类型

标识提交数据的类型

提交

• application/x-www-form-urlencoded（key-value）

• multipart/form-data（有文件上传）

• application/json(json)

• text/xml(以前比较多)

• 可以自定义

性能优化：

• keep-alive

• 减少网络传输大小

• 缓存

• http2/http3

keep-alive：

• HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive

• HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close

减少传输大小 使用gzip 压缩（也需要时间，并加标记）太小不宜去gzip大于1k文本内容

缓存：

首次请求加载后缓存 通过 304状态码

1. 协商缓存

last-Modified 服务端通过他判断时间是否有效，返回响应头值日期

Etag 编码值，为了解决上面不准问题，服务器比较，

请求也不发直接判断是否

2. expires 强缓存

强缓存.PNG

Cache-Control 更多规则 解决expire是日期问题:

cache-control.PNG

其他缓存

• LocalStorage

  保存js，css，维护一些版本，提升页面打开速度

• ServiceWorker

  拦截请求，定制规则，控制缓存

HTTP2

• 二进制传输

• 多路复用

• 头部压缩

• server push

HTTP3

基于 QUIC 协议（UDP）udp更快

HTTP 抓包工具

• Wireshark

• Fiddler

• Firebug for Firefox

• Chrome 开发者工具

• IE8+ 自带的开发者工具

HTTP 发包工具

• telnet / curl

• Fiddler *

• Tamper for Firefox

• Postman for Chrome *

• Paw for OSX
  推荐书籍：

  
  
  推荐书籍.PNG