HTTP实用指南 ｜ 青训营

Cmon
85 阅读3分钟

初识HTTP协议

初识

背景知识

image.png

  • 在浏览器地址栏输入一个字符串到页面渲染出东西这个过程中发生了什么？

image.png

什么是HTTP

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议，基于TCP协议
  • 请求响应
  • 简单可扩展
  • 无状态

image.png

协议分析

持续发展

image.png

HTTP/2概述

image.png

image.png 如果每次有相关请求都要建立链接，消耗较大。 image.png

HTTPS概述

image.png

报文解析

image.png

  • 以1.1协议为例

Method

image.png

  • Safe (安全的):不会修改服务器的数据的方法(GET HEAD OPTIONS)
  • ldempotent(幂等): 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是ldempotent的。（GET HEAD OPTIONS PUT DELETE）

状态码

image.png

RESTful API

image.png

常见请求头

image.png

常见响应头

image.png

缓存

  • 请求头的一个场景
    • 强缓存：如果该资源本地存在，可直接使用。
    • 协商缓存：即使本地有一个缓存，仍需与server端有一个通信验证该资源能否使用的过程。 image.png
  • 在真实处理这么多缓存中是否有优先级的区别？ image.png

cookie

image.png

场景分析

image.png

静态资源

image.png

  • 打开CSS请求后有一个index.开头，.css结尾的文件，若抓到了请求且状态码为200，是否有真实的请求网络的过程？

image.png

  • 若未成功抓包，即 from cache，实际上是从本地缓存里拿到的响应。

image.png

  • access-control-allow-origin：*代表一个访问控制，*表示允许任意的访问来源请求。
  • content-type:text/css; charset=utf-8表示携带的实际信息的资源类型，即CSS文件。

image.png

  • 第一次打开页面的时候，为让页面尽可能快，将静态资源放在CDN中。

登陆

image.png

  • 在输入框内输入关键词quick_login，选择ALL，有两个请求。 image.png
  • 区别
    • 第一个请求：Method为OPTIONS，为经典场景，但存在跨域，所以会有OPTIONS的出现。
      • 什么是跨域？什么时候跨域？

image.png

  • 默认端口号为443或80，可省略。

image.png

  • 请求分为简单请求和复杂请求，当请求为复杂请求（生活和生产中大部分都是）时，查明sever端是否允许跨域，才会发起跨域。

image.png

  • 跨域问题实际上是浏览器的一个叫“同源策略”的安全策略，若通过代理服务器可以绕开浏览器，既可以解决这个问题。

image.png 两个问题 image.png

  • HTTP不是无状态请求吗？为什么能记住登陆态？ 答：涉及到了一个及安全方案 image.png
  • 大部分网站都使用Session+cookie的方案，登陆成功后会发起一个提交的请求，将当天的帐户名密码等相关信息提交给Sever，若正确，Sever会将信息存储起来。
  • 也可使用JWT，下一次登陆时将token提交给Sever，Sever判断解析是否有效。

image.png

  • 简单介绍

image.png

实战

浏览器篇

  • AJAX之XHR image.png
  • AJAX之Fetch
    • Promise能很好地处理回调定域 image.png

node篇

  • 标准库：HTTP/HTTPS image.png
  • 常用的请求库：axios，能进行逻辑判断当前所属的不同的环境，执行相应的请求。 image.png

用户体验

网络优化

image.png

稳定性

image.png

了解更多

通信方式

webSocket

image.png

QUIC

image.png

avatar
文章
阅读
粉丝