青训营

45 阅读4分钟

我们要深入的了解下HTTP的话那么,一些必要的场景分析是必不可少的!!我们先打开chrome,然后输入www.toutiao.com ,然后呢打开控制台,右键->检查,切换到network.我们可以检查css,以css为例子。

image.png

让我们来好好剖析下子吧!!我们本地抓到的状态码为200。我们可以想想就算是200难道是一定发起了请求吗?我们所指的请求是说真的在我们的网络层有过一遍完整的流程。从浏览器的发起到进入到网络的传输过程中拿到server再返回的链路。我们如同所见可以看到200状态码后边表明的是OK那么是实实在在的发起了网络请求。我们比较下下面的图片吧!!

5989e51ab542e768cb3118ca675eeda.jpg

我们可以看到200后边出现了(from disk cache)这表明请求是从本地缓存里边拿到的响应。并没有真实的经过我们所说的过程。 我们想想为什么我们可以这样干呢?点击Response Headers我们可以看看缓存策略:以先边的图片来剖析下!

6ca78f94f090d7b4a79a91b07868f33.jpg

我们可以看到Cache-control:max-age=31536000 这是属于强缓存并且设置的时间是为一年。我们看到还有access-control-allow-origin:* 这表明允许所有域名来访问。相对而言资源对访问控制会管的比较松。我们也可以看到这里有个content-type:text/css 表示为携带的实体信息的资源类型为css。 我们静态资源在部署上有没有什么方案呢?在性能优化方面?这时候我们希望用户能越快的看到页面并且能够去做一些可交互的行为这才是我们要做的。但影响用户看到页面的效果,可能就算页面里边的一些静态资源访问的速度。如果我们能够解决这个问题那么加强用户体验就水到渠成了。 这时候就又回到了我们之前说的缓存了,用了缓存后用户可以优先从本地缓存里边读取文件,拿到结果一定是快的。但是我们试想一下如果是第一次打开页面,本地也没有缓存我们也希望用户尽可能的快,我们把静态资源放在CDN上那就解决了这个问题。通过对CDN的了解我知道了CDN原来是这样子的: 它是一种分布式服务器网络,旨在通过将内容缓存到全球各地的服务器上来加速互联网内容的交付。CDN 的主要目的是减少用户访问内容的延迟,提高网站和应用的性能,同时减轻源服务器的负担。它能通过一些就近性的策略让用户比较快速高效的拿到这个资源的网络分发方式。我们回到强缓存:我们设置了强缓存设置了有效期是一年,这确实是保证了用户快了,但是用户拿到的资源可能不新!!这时候我们可以在文件名上做手脚可以加文件名hash,当每次文件内容有变的时候文件名都会变化,从而拿到最新的数据。 对于跨域问题呢先谈到跨域的预请求:跨域预请求(Preflight Request)是 CORS(Cross-Origin Resource Sharing,跨域资源共享)机制的一部分,用于在发送实际请求之前,先发送一个 OPTIONS 请求来检查服务器是否允许实际请求。这种机制可以防止潜在的安全风险,确保跨域请求的安全性。 OPTIONS 请求的头部会包含 Access-Control-Request-Method 和 Access-Control-Request-Headers 字段,分别表示实际请求的方法和自定义请求头。 客户端发送预请求: 浏览器在发送实际请求之前,会自动发送一个 OPTIONS 请求到服务器。 OPTIONS 请求的头部会包含 Access-Control-Request-Method 和 Access-Control-Request-Headers字段,分别表示实际请求的方法和自定义请求头。

服务器响应预请求: 服务器接收到 OPTIONS 请求后,会检查请求的合法性。 如果服务器允许该请求,会在响应中包含相应的 CORS 头部信息,例如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 和 Access-Control-Allow-Origin。 我们可以看到如下的场景:

  1. 客户端发送实际请求: 如果预请求成功,浏览器会发送实际的请求。 如果预请求失败,浏览器会阻止实际请求的

cors 原理就算使用代理服务器来解决了跨域问题。我们也可以借助Iframe通信但诸多不便,相对比较少去用。