HTTP使用指南之具体应用分析 | 青训营笔记

42 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天


本篇主要围绕两点记录

1.HTTP应用场景分析

2.HTTP实战分析

1.应用场景分析

应用场景

缓存更新

条件式请求最常见的应用场景是更新缓存。假如缓存为空,或者是没有缓存的话,被请求资源会以状态码 200``OK 返回。

验证器会同资源一起返回,它们出现在首部字段中。在这个例子中, Last-Modified 与 ETag 都被返回,不过如果只返回其中的一个也是可以的。这些验证器会同资源一起被缓存起来(与所有的首部一样),并在在缓存失效的时候用来发起条件式请求。

只要缓存未失效,就不会发起任何请求。但是一旦失效——主要是由 Cache-Control 首部控制——客户端就不会采用缓存值而是发起条件式请求。验证器的值会用作 If-Modified-Since 和 If-Match 首部字段的参数。

假如资源未发生变化,服务器就返回状态码为 304 Not Modified 的响应。这样相当于对缓存资源进行了刷新,而客户端则采用被缓存的资源。尽管这里有一次请求/响应往返会消耗一定的资源,但是这样做比将整个资源通过网络再传输一遍更高效。

With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same.

假如资源发生了变化,服务器就直接返回 200 OK 响应码,连同新版本的资源,就像是没有应用条件式请求一样;客户端则采用新版本资源(并将其缓存起来)。

In the case where the resource was changed, it is sent back as if the request wasn't conditional.

除了需要在服务器端对验证器进行设置以外,该机制是透明的:所有的浏览器都会对缓存资源进行管理,在不需要 Web 开发者进行任何特殊处理的情况下发送条件式请求。

image.png

静态资源

真的发起请求了吗/是否一定需要这样一个请求? image.png

说明是从本地缓存里拿到的响应,并没有真实地经过整个网络

image.png 缓存策略:强缓存

image.png

扩展知识:静态资源部署

方案:缓存+CDN+文件名hash

什么是CDN?

Content Delivery Network

image.png

登录

image.png

image.png 跨域请求

解决方案: CORS、代理服务器 image.png

单点登录方案 image.png

2.实战分析

浏览器篇

image.png

image.png

node篇

PS:功能有限,可能要再进一步封装

image.png

image.png

用户体验

image.png

稳定性

image.png