当前位置: 首页 > news >正文

【前端进阶】07 http协议和前端开发有什么关系

http协议和前端的关系

    • 网络请求的过程
    • http协议
    • http cookie
    • http缓存
    • 浏览器get请求过程
    • 双向通信
    • websocket

http请求的场景相对复杂,对应的http协议也是各式各样的。在日常开发中,经常会使用到cookie、浏览器缓存机制、各种形式的网络连接,这些都和http请求有密切的关系

网络请求的过程

在这里插入图片描述

http协议

在这里插入图片描述

http cookie

http协议是无状态的,这意味着,在同一TCP连接中,先后发起的请求之前没有任何关系,用户在同一个网站中进行连续的操作,服务端无法知道这些操作来自哪里,使用httpcookie可以解决这个问题:

  1. 当服务端http响应给客户端时,通过在响应里添加一个setCookie信息
  2. 浏览器收到setCookie信息的响应后会将Cookie进行保存,在后面发送给该服务端每个请求中,都会带上cookie信息
  3. 服务端根据cookie信息,就能获取客户端的数据信息

由于cookie信息是被浏览器自动识别并被保留发送的,因此在默认情况下,浏览器关闭后就会被自动删除,但我们也可以通过指定过期时间或者有效期来让cookie获取更久的有效期
如果网站上设置了cookie之后,所有符合条件(有效期、域名、路径、适用站点等)的请求都会自动被带上cookie,这就带来了安全隐患,服务端只知道请求来自某个用户的浏览器,却不知道请求本身是否是用户自愿发出的,容易造成安全隐患
为了应对这种情况,我们可以校验http请求中的Referer字段,这个字段用来标明请求来自于哪个地址,由于该字段可能会被篡改,因此只能作为辅助校验手段
在这里插入图片描述

http缓存

通过缓存可以有效的减少资源获取的耗时,减少用户的等待时长,从而推升用户体验

通过http协议,设置浏览器对http响应资源进行缓存,使用浏览器缓存后,当我们再发起http请求时,如果浏览器缓存发现请求的资源已经被存储,它会拦截请求并返回该资源的副本,不需要再次请求服务端获取资源,因此减少了http请求的耗时,同时也有效的缓解了服务端压力

http缓存只能存储get请求的响应内容

  1. 不缓存内容,每次请求都会从服务端获取最新内容
  2. 缓存内容,在有效期内会从缓存中获取内容,如果用户刷新或者内容过期则去服务端获取最新内容

在浏览器中,是依靠请求和响应中的头信息来控制缓存的,根据缓存的行为可以分为
在这里插入图片描述

浏览器get请求过程

在这里插入图片描述

双向通信

客户端服务端双向通信,常见的双向通信方式

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/174099e683a04f50b0428d754b4cf4a1.png在这里插入图片描述

websocket

websocket实现了浏览器与服务端的全双工通信,在实现实时通信的同时,能够更好的节省服务端的资源和带宽
websocket建立在TCP协议之上,握手阶段采用http协议
在这里插入图片描述
webscoket由于不再需要通过http协议通信,省去请求头等内容设置,因此,数据格式会更加轻量,通信更加高效,性能开销也相应的降低
wenscoket没有同源限制,因此客户端可以与任意服务端进行通信

参考教程: 前端进阶教程

相关文章:

  • springboot实现文件上传到华为云的obs
  • Android 12.0 第三方app接收不到开机广播问题的解决以及开机自启动功能实现一
  • Java+SpringBoot+Vue+数据可视化的音乐推荐与可视化平台(程序+论文+讲解+安装+调试+售后)
  • 为什么一个ip地址可以用浏览器打开,但是不能ping通
  • 算法题训练 ——— NC313 两个数组的交集
  • vscode中使用PlatformIO创建工程加载慢
  • 优选算法大集合(待更新)
  • 25.2.25补题
  • freetype封装
  • Java进阶学习笔记95——网络编程
  • langchain系列(五)- LangChain 的tool原理与代码实现
  • SpringSecurity获取当前登录用户信息
  • AI提示词的种类与适合的任务
  • DeepSeek开源周 Day02:从DeepEP开源趋势重新审视大模型Infra
  • WordPress Course Booking System SQL注入漏洞复现 (CVE-2025-22785)(附脚本)
  • 1分钟用DeepSeek编写一个PDF转Word软件
  • springboot志同道合交友网站设计与实现(代码+数据库+LW)
  • HTTP/HTTPS 服务端口监测的简易实现
  • 鸿蒙5.0实战案例:har和hsp的转换
  • 三、大模型微调的多种方法与应用场景
  • 兰州做网站优化的公司/百度一下就知道
  • 武汉网站建设设计哪家好/chatgpt网址
  • 坑人网站怎么做/杭州seo网站排名优化
  • 电影网站推广/电商sem是什么意思
  • 免费影视网站建设/百度推广官网入口
  • 贵阳网络网站建设/免费建自己的网址