您的位置: 首页  >  文章  >  前端常用的HTTP知识

前端常用的HTTP知识

分类: 文章 • 2025-01-30 08:38:04

前端常用的HTTP知识

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

前端常用的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 请求类型

前端常用的HTTP知识

 

6 状态码

 

前端常用的HTTP知识

 

前端常用的HTTP知识

7 URL

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

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

  • 受限字符：%/#?;:[email protected]&=以及非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性能权威指南》

 

 

相关推荐