站在前端的角度看-网络编程

最新推荐文章于 2022-05-01 09:15:03 发布

路路的鹿溪

最新推荐文章于 2022-05-01 09:15:03 发布

阅读量148

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lulu_luxi/article/details/108219302

版权

关于网络编程

一级目录

http详解

http缓存

http缓存就是将静态资源存储在浏览器内部，下次请求相同的资源的时候可以直接使用，不用再去请求，这样可以减少不必要的资源浪费的现象。优点：提高首屏加载速度，优化用户体验；介绍流量消耗；减轻服务器的压力。
http的缓存是比较容易实现，但是如何保证在资源的内容有变化的时候，缓存也会随之更新，这就需要http的几种方法。
在这里会用node代码的形式展现一下各种缓存方式，首先搭建一个测试框架：

//创建一个时间戳
function updateTime(){
 timmer = this.timmer|| setInterval(()=>{
   this.time = new Date().toUTCString()
  },5000)
  return this.time
}


//创建一个服务，来表示请求的变化
const http = require('http')
http.createServer((req,res)=>{
 const {url} = req
 if('/'===url){
    res.end(
        `
        <html>
           Html Update Time ${updateTime()}
           <script src='main.js'></script>
        </html>
        `
    )
 }else if(url === '/main.js'){
    const content = `document.writeln('<br>JS Update Time:${updateTime()}</br>')`
    res.statusCode = 200;
    res.end(content)
 }else if(url==='/favicon.ico'){
   res.end('')
 }
})
.listen(3000,()=>{
 console.log('http 请求的访问')
})

页面显示为：
在这里插入图片描述

强缓存策略

就是浏览器规定多长时间内，客户端如果需要的话直接从本地副本对比读取，不去请求服务器，返回的状态码是200.
使用定时器的方式来确定强缓存，设置静态资源的有效期。

HTTP1.0

expires
expires是http1.0中定义的缓存字段。当我们请求一个资源，服务器再返回时，可以在Response Header中增加expires字段表示资源的过期时间。

expires:Thu,03 Jan 2019

这是一个时间戳，当客户端请求该资源的时候，会用客户端的时间与该事件对比，如果大于改时间说明过期，否则直接使用该资源。
这个方法有个比较大的问题，就是发送请求是用的客户端的时间去对比，客户端与服务器端的时间可能不一致，还有就是客户端的时间是可以自行修改的。所以可能达不到预期的目标。

    const content = `document.writeln('<br>JS Update Time:${updateTime()}</br>')`
    //设定强缓存，在10秒之后过期
       res.setHeader('Expires',new Date(Date.now()+10*1000).toUTCString())
       res.statusCode = 200;
       res.end(content)

效果对比：
在使用前缓存之前，两次请求的时间是一样的：
在这里插入图片描述
在使用强缓存之后，两次请求时间不同：

HTTP1.1

cache-control
当cache-control和expires同时存在的时候cache-control的优先级是比较高的.。该字段是一个时间长度，单位秒，表示该资源过了多少秒之后失效。当客户端请求资源的时候发现该资源还在有效时间内则使用该缓存，它不依赖客户端的时间。cache-control主要包括：max-age / s-maxage / public和private no-cache/ no-store等值。

Cache-directive	说明
public	所有内容都将被缓存(客户端和代理服务器都可以缓存)
private	内容只缓存到私有缓存中（客户端可以缓存）
no-cache	需要使用协商缓存来验证缓存数据
no-store	所有内容都不会缓存
must-revalidation/proxy-revalidation	如果缓存内容失效，请求需要发送到服务器/或者代理进行重新验证
max-age=xxx	缓存的内容将在xxx秒后失效，这个选项只在HTTP1.1中可用，并如果和Last-Modified一起使用的时候，优先级较高。