HTTP 实用指南 | 青训营笔记

因缺思厅
68 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第4天，主要记录一下HTTP相关知识

HTTP 超文本传输协议

image.png

报文

image.png

Method

image.png

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

RESTful API

image.png

状态码

image.png

常用请求头

image.png

常用响应头

image.png

缓存

image.png

cookie

image.png

HTTP/2

image.png

image.png

HTTPS

image.png

image.png

场景分析

我们打开Chrome调试工具，选择到NetWork选项，尝试访问掘金官网,研究一下静态资源请求的详细内容，查看index.css。

image.png 这个状态码是200，从硬件缓存中读取，因此有时状态码为200，不一定会发起一个真实的请求。

响应头

  • cache-control:max-age=31536000这个指定了过期时间，与强缓存相关
  • last-modified: Tue, 19 Apr 2022 12:40:37 GMT指定了最后修改时间，与协商缓存相关
  • access-control-allow-origin:*允许哪些origin能访问我们，与同源策略有关
  • content-type:text/css; charset=utf-8指定了实体数据的类型 image.png

静态资源

文件名hash的作用是根据文件内容生成hash值，这样，文件内容变化的时候，请求文件名就不一样，就不会用到缓存，以获取到最新文件内容 image.png

登录

image.png

image.png

image.png

AJAX-XHR

image.png

AJAX-Fetch

image.png

标准库 HHTP/HTTPS

image.png

axios

image.png

网络优化

image.png

稳定性

image.png

WebSocket

image.png

QUIC

image.png

结语

文章只为简单记录，更多关于浏览器原理的知识并未涉及，具体可参考(1.6w字)浏览器灵魂之问，请问你能接得住几个？

avatar
文章
阅读
粉丝