前端星-07：前端常用的http

穹高jones0820
213 阅读4分钟

李成银导师主机

http在浏览器网络中的位置？

如上图，http为应用层协议，主要负责client和server之间的请求响应通信，将联网细节交给了通用的传输协议tcp/ip，默认80端口。

结构？

  1. 请求报文结构
<method> <request-URL> <version>
<headers>
<entity-body>
  • 请求方法method，以下为规范（防范xss攻击）
    • GET 获取一个资源内容
    • POST 新增一个资源
    • PUT 更新资源内容
    • DELETE 删除资源
    • OPTIONS 根据返回判断是否有对其请求的权限
    • HEAD 只返回 head，不返回实体内容
    • PATCH 更新部分内容
  1. 响应报文结构
<version> <status> <respon-phrase>
<headers>
<entity-body>
  • 状态码status
    • 101 切换协议，如：用于实况更新如聊天室等场景，在进行连接时，首先会发送一个HTTP 协议，通过返回101将其切换为 WebSocket 协议，再进行传输通信。（面试会考）
    • 200 成功
    • 206 返回部分内容，如：大文件下载
    • 301 永久重定向，如：资源更换路径或改名
    • 302 临时重定向，如：当前请求需要登录，临时跳转到登录页
    • 304 资源未修改，不返回实体内容，客户端可直接读取本地缓存内容
    • 400 错误请求
    • 403 拒绝执行，如：无对应的访问权限
    • 404 资源找不到，如：服务器已经删除该资源
    • 413 请求实体过大，如：服务端限制了上传的文件大小
    • 500 服务端内部错误，如：数据处理异常导致报错
    • 502 作为网关或代理服务器时，上游服务器异常
    • 504 作为网关或代理服务器时，上游服务器处理超时
  1. url结构
<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>
http://<host>:<port>/<path>?<query>#<frag>
ftp://<user>:<password>@<host>:<port>/<path>;<params>

注：url中存在一些受限字符：`%/.#?;:$+@&=` 以及非`US-ASCⅡ`字符集字字符等，需要使用encodeURI进行转义
  1. 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：标识用户身份

    GET / HTTP/1.1
Host: m.so.com
Connection: keep-alive
Cookie: __guid=34870781.3073803881376862000

HTTP/1.1 200 OK
Server: nginx/1.2.9
Date: Wed, 08 Oct 2014 05:59:59 GMT
Connection: keep-alive
Set-Cookie: thinkjs=s4mhqotbdbg9uh917lu8d5bub5; path=/
Content-Encoding: gzip

    set-cookie中需注意： - samesite这个属性，用来设置是否支持第三方跨站请求，防范csrf攻击，详细信息看讶羽大佬的博文：预测最近面试会考 Cookie 的 SameSite 属性
    - httponly属性，用来设置是否支持脚本获取cookie的方式，防范xss攻击盗取cookie

  • session

    • 服务器侧对应为 Session，基于 Cookie 存放用户信息
    • Cookie 有效期为 Session（随浏览器进程退出而失效）

  • Content-Type：表示响应返回内容类型和请求提交内容类型，用来client和server协商

    • application/x-www-form-urlencoded：key-value形式内容
    • multipart/form-data：文件内容类型
    • application/json：json内容类型
    • text/xml：xml内容类型,可根据项目需要通过Gzip进行内容压缩

http相关性能优化？

  • keep-alive：解决请求完成后就关闭问题
  • 减少网络传输大小
    • Gizp压缩
  • 缓存
    • 强缓存：Expires、cache-control
    • 协商缓存：last-modified、Etag
    • 浏览器缓存：localStorage,可以用来缓存js或者css版本内容，有变更就删除并更新
    • Service work
  • http2
    • 二进制传输：二进制格式在协议的解析和优化扩展上带来更多的优势和可能。
    • 多路复用
    • 头部压缩：客户端和服务端共同维护一张头信息表，所有字段存入这个表，生成一个索引号，通过发送索引号提高速度。
    • server push
  • http3
    • 基于 QUIC 协议（UDP）

http抓包工具？

  • Wireshark
  • Fiddler
  • Firebug for Firefox
  • Chrome 开发者工具
  • IE8+ 自带的开发者工具

推荐书籍？

  • 《图解HTTP》
  • 《HTTP权威指南》
  • 《web性能权威指南》
avatar
文章
阅读
粉丝