前端常用的HTTP知识

前端常用的HTTP知识

1 http在浏览器网络中的位置，属于应用层协议

 

2 http的版本 1.0， 1.1， 2， 3

http3底层是基于UDP来的，之前的是基于Tcp来的

3 浏览器开发者工具中的network中 protocol可以看http的版本 h2表示http2

4 network 可以看请求的具体信息

1. request请求包含

   • method

   • request-url

   • version

   • headers

   • entity-body

2. response请求

   • version

   • status

   • respon-phrase

   • headers

   • entity-body

5 请求类型

 

6 状态码

 

 

7 URL

• http://<host>:<port>/<path>?<qurey>#<frag>

• ftp://<user>:<password>@<host>:<port>/<path>;<params>

• 受限字符：%/#?;:$@&=以及非US-ASC 字符集字符

8 Header 分类

• 通用

  • Date

  • connentection: close

• 请求

  • User-Agent

  • Accept

• 响应

  • Server: Nginx

  • Last_Modified

• 实体

  • Content-Type: text/html;charset-utf-8

  • Content-Length:100

• 扩展（自定义）

  • X-Powered-By: thinkJs-3.0.4

  • X-Cache:hit

9 Cookie(重点)：用于做网站的登录

9.1如何使用

• 请求头:Cookie

• 响应头：Set-Cookie

9.2 Cookie安全策略 相关规则

• path

• domain (hostonly*)

• expires (max-age)

• secure

• httponly

• SameSite

• XSS 漏洞盗取Cookie,设置httponly

• CSRF漏洞，设置token/samesite

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

Cookie有效期为Session(随着浏览器进程的推出而失效)

10 content-type

表示当前返回资源的类型

• application/x-www-form-urlencoded

• multipart/form-data

• appliaction/json

• text/xml

11 性能优化

• keep-alive

  • http1.1 新增 Connection: Keep-alive 表示请求完之后，后面可以复用这个tcp连接

• 减少网络传输大小

  • 通过编码 请求 content-encoding:gzip, deflate, br 压缩资源

  • 响应 accept-encoding

  • 编码压缩主要是针对文本资源，svg,但是图片或者视频不可以。大约减少60%

  • 文件过小不宜压缩（<1k）

• 缓存

  • 首次请求 200

  • 二次请求 304 只返回响应头没有实体内容，从缓存中读取

    • last-Modified 日期 对应文件在服务器上存的时间 协商缓存

    • ETag 编码的值

  • expires 在这个日期之前 这个资源都是些相同的，就不用像服务器发送请求了

  • Cache-Control

  • localStorage 存js css

  • ServiceWorker

• http2/http3

  • HTTP2

    • 二进制传输

    • 多路复用

    • 头部压缩

    • server push

  • HTTP3

    • 基于QUIC协议（UDP）

   

  12 HTTP抓包工具

  • wireshark

  • Fiddler

  • FireBug for Firefox

  • chrome 开发者工具

  13 发包工具

  • telnet / curl

  • Fiddler

  • postman for Chrome

推荐书籍

• 《图解HTTP》

• 《HTTP权威指南》

• 《Web性能权威指南》