当前位置:   article > 正文

为什么清空缓存后css文件错误_切图仔学后端-缓存

css文件在清除缓存后访问不到

af7bda7698ce046174b7786d040f927a.png

前言

你好,我是一个前端切图仔。这是一篇切图仔学后端的学习笔记,今天我们盘的是缓存。本文实例搭建依赖的是 Node.js

缓存( cache),原始意义是指访问速度比一般随机存取存储器( RAM)快的一种高速存储器。

而在广义意义上,同样是存储的结构,若前者比后者的访问速率快一个量级,则称前者为后者的缓存。比如cache内存快,内存取值比硬盘快等。

缓存简介

一般缓存都有如下特征:

  • 命中率:命中率=正确结果数/请求缓存次数。它是衡量缓存有效性的重要指标,命中率越高,表名缓存的使用率越高
  • 最大空间:可以存放元素的最大数量,若超过这个值,那么会触发清空策略
  • 清空策略:
    • FIFO(first in first out)先进先出策略,最先进入缓存的优先被清除掉。
    • LFU(less frequently used)最少使用策略,无论是否过期,清除最少使用的元素 LRU(least recently used)最近最少使用策略,无论是否过期,根据元素最后一次被使用的时间戳,清除最远使用时间戳的元素释放空间。

客户端缓存

打开 ChromeNetwork 面板,我们可以看到如下信息:

b5c291906149fae288abe46b79a1b50e.png

看到 Size 栏,我们可以看到这些资源部分是来自memory cache亦或是disk cache,还有 status 栏里面没有显示出来的 304 状态码。下面分别介绍这些。

加载资源顺序一般如下: 1. 先去内存看,如果有,加载 2. 内存没有,去硬盘看,如果有,加载 3. 硬盘没有,则发起网络请求 4. 加载到的资源根据规则缓存到硬盘和内存

memory cache & disk cache

  • 内存缓存(from memory cache):内存缓存具有两个特点,分别是快速读取和时效性:
  • 快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。
  • 时效性:一旦该进程关闭,则该进程的内存则会清空。
  • 硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

强缓存&协商缓存

在网络请求中,缓存一般分为强缓存和协商缓存,下面分别介绍:

强缓存

强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程,强制缓存的情况主要有三种(暂不分析协商缓存过程),如下:

  • 不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求
  • 存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存
  • 存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果
那么强制缓存的缓存规则是什么?

当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是ExpiresCache-Control,其中Cache-Control优先级比Expires高。

Expires

ExpiresHTTP/1.0控制网页缓存的字段,其值为服务器返回该请求结果缓存的到期时间,即再次发起该请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。

ExpiresHTTP/1.0的字段,但是现在浏览器默认使用的是 HTTP/1.1,那么在 HTTP/1.1 中网页缓存还是否由 Expires 控制?

到了HTTP/1.1Expire已经被Cache-Control替代,原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,那么如果客户端与服务端的时间因为某些原因(例如时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存则会直接失效,这样的话强制缓存的存在则毫无意义,那么Cache-Control又是如何控制的呢?

Cache-Control

HTTP/1.1 中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:

  • public :所有内容都将被缓存(客户端和代理服务器都可缓存)
  • private :所有内容只有客户端可以缓存,Cache-Control的默认取值
  • no-cache客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
  • max-age=xxx :缓存内容将在xxx秒后失效

协商缓存

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:

  • 协商缓存生效,返回304
  • 协商缓存失效,返回200和请求结果结果

同样,协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的,控制协商缓存的字段分别有:Last-Modified / If-Modified-SinceEtag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

Last-Modified / If-Modified-Since

Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间,如下。

If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件。

Etag / If-None-Match

Etag是服务器响应请求时,返回当前资源文件的一个唯一标识

If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200

注:Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。

小结

强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;生效则返回304,继续使用缓存。

Node实现

有了上面的理论知识支持之后,我们可以尝试用Node.js来添加缓存的支持。缓存配置文件如下:

ps: source 为资源信息,部分代码已省略
  1. const cache = {
  2. maxAge:3600,
  3. expires:true,
  4. cacheControl: true,
  5. lastModified: true,
  6. etag: true
  7. }
  8. module.exports = cache

接下来实现缓存判断的中间件逻辑

  1. function refreshRes(stats, res) {
  2. const {maxAge, expires, cacheControl, lastModified, etag} = cache;
  3. if(expires) {
  4. res.setHeader('Expires', (new Date(Date.now() + maxAge*1000)).toUTCString());
  5. }
  6. if(cacheControl) {
  7. res.setHeader('Cache-Control', `public, max-age=${maxAge}`);
  8. }
  9. if(lastModified) {
  10. res.setHeader('Last-Modified', stats.mtime.toUTCString());
  11. }
  12. if(etag) {
  13. res.setHeader('ETag', generateETag(stats));
  14. }
  15. }
  16. function isFresh(source){
  17. refresh(source,res)
  18. const lastModified = req.headers['if-modified-since'];
  19. const etag = req.headers['if-none-match'];
  20. if(!lastModified && !etag) {
  21. return false;
  22. }
  23. if(lastModified && lastModified !== res.getHeader('Last-Modified')) {
  24. return false;
  25. }
  26. if(etag && etag !== res.getHeader('ETag')) {
  27. return false;
  28. }
  29. return true;
  30. }
  31. module.exports = isFresh

在返回资源时判断:

  1. if(isFresh(resource, req, res)) {
  2. res.statusCode = 304;
  3. res.end();
  4. return;
  5. }

服务端缓存

在一些比较大流量的网站中,离不开缓存层。为的也是减轻数据库层面的负担,常用的缓存系统有 MemcachedRedis。我们先来手写一个简单的缓存类,来看看这类型的缓存是咋的一回事。

Cache.js

一开始我们希望Cache有如下特征: - 键值对存储 - 增删查方法 - 过期机制

新建一个Cache.js,如下编码:

  1. class Cache {
  2. constructor(maxAge = 1000 * 60 * 30,max = 10) {
  3. this.maxAge = maxAge
  4. //保存缓存的 Map
  5. this.cache = new Map()
  6. //过期时间 Map
  7. this.ttl = new Map()
  8. this.max = max
  9. }
  10. getCache(key) {
  11. let ttl = this.ttl.get(key)
  12. if ((+new Date()) - ttl >= this.maxAge) {
  13. //过期了则删除
  14. this.deleteCache(key)
  15. return null
  16. } else {
  17. return this.cache.get(key)
  18. }
  19. }
  20. setCache(key, value) {
  21. this.cache.set(key) = value
  22. this.ttl.set(key) = +new Date()
  23. }
  24. deleteCache(key) {
  25. this.cache.delete(key)
  26. this.ttl.delete(key)
  27. }
  28. }
  29. module.exports = Cache
  • 写出缓存时同时写入当前时间戳
  • 拿缓存时对比时间戳,过期则删除,返回空

LRU缓存淘汰

下面加入缓存淘汰机制,以当前用的最多的LRU机制为例。(貌似面试也很喜欢让手写这个)

  • set流程:
  • 已经存在,提升
  • 达到max,淘汰最后一个
  • 更新过期时间
  • get流程:
  • 不存在则返回空
  • 过期则删除
  • 提升数据,返回
  • delete流程:
  1. 不存在则直接返回
  2. 依次让key后面的元素覆盖
  3. 删除ttl的key
  1. class Cache {
  2. constructor(maxAge = 1000 * 60 * 30, max = 10) {
  3. this.maxAge = maxAge
  4. //保存缓存的object
  5. this.cache = [];
  6. this.max = max
  7. //过期时间object
  8. this.ttl = new Map()
  9. }
  10. getCache(key) {
  11. let index = this.findIndex(key);
  12. if (index === -1) {
  13. return undefined;
  14. }
  15. if ((+new Date()) - this.ttl.get(key) >= this.maxAge) {
  16. this.deleteCache(key)
  17. return undefined
  18. } else {
  19. // 删除此元素后插入到数组第一项
  20. let value = this.cache[index].value;
  21. this.cache.splice(index, 1);
  22. this.cache.unshift({
  23. key,
  24. value,
  25. });
  26. return value;
  27. }
  28. }
  29. setCache(key, value) {
  30. let index = this.findIndex(key);
  31. // 已经存在,提升
  32. if (index > -1) {
  33. this.cache.splice(index, 1);
  34. } else if (this.cache.length >= this.capacity) {
  35. // 若已经到达最大限制,先淘汰一个最久没有使用的
  36. this.cache.pop();
  37. }
  38. this.cache.unshift({
  39. key,
  40. value
  41. });
  42. this.ttl[key] = +new Date()
  43. }
  44. deleteCache(key) {
  45. let index = this.cache.findIndex(key)
  46. if(index == -1)return
  47. //依次提升
  48. for (let i = index; i < this.cache.length - 1; i++) {
  49. this.cache[i] = this.cache[i + 1]
  50. }
  51. delete this.ttl[key]
  52. }
  53. findIndex(key) {
  54. return this.cache.findIndex(item => key === item.key)
  55. }
  56. }
  57. module.exports = Cache

Memcached

简介

随着互联网的发展,传统的关系型数据库开始出现瓶颈。例如: - 对数据库的高并发读写,处理过程复杂耗时。 - 海量数据处理,对于关系型数据库查询海量数据效率会很低

Memcached是高性能的分布式缓存服务器,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度。

简单实例

在本地安装好Memcached后,安装node依赖:npm install memcached --save。再次简单封装一个Cache类如下:

  1. const Memcached = require('memcached');
  2. const memcached = new Memcached('localhost:11211');
  3. class Cache {
  4. get(key) {
  5. return new Promise((resolve, reject) => {
  6. memcached.get(key, (err, data) => {
  7. if (err) {
  8. reject(err)
  9. } else {
  10. resolve(data)
  11. }
  12. })
  13. })
  14. }
  15. set(key, value, lifetime) {
  16. return new Promise((resolve, reject) => {
  17. memcached.set(key, value, lifetime, (err, data) => {
  18. if (err) {
  19. reject(err)
  20. } else {
  21. resolve(data)
  22. }
  23. })
  24. })
  25. }
  26. }
  27. const cache = new Cache()
  28. async function test() {
  29. var json = {
  30. name: 'abc',
  31. age: 12,
  32. sa: 16
  33. }
  34. await cache.set('t', JSON.stringify(json), 0)
  35. const res = await cache.get('t')
  36. console.log(res)
  37. }
  38. test()

当一个请求过来时,比如要获取首页的文章,可先从缓存中取,若取不到则读取数据库然后加入缓存,下次来时可以直接从缓存返回。

ps:MySQL数据库操作:为Node.js加一个DB类
  1. async getSubject(){
  2. let sql = `SELECT * FROM subject`
  3. let key = md5(sql)
  4. let data = await cache.get(key)
  5. let result
  6. if(!data){
  7. result = await db.table('subject').select()
  8. cache.set(key,JSON.stringify(result))
  9. }
  10. return result
  11. }

分布式布置方案

当1台不能满足我们的需求,需要布置多台时,怎么保证一个数据保存到哪台服务器上呢?有两种方案,一种是普通Hash分布,另一种是一致性Hash分布。下面分别介绍

普通Hash分布

普通Hash函数大概如下:

  1. function hash($key) {
  2. let md5Str = md5($key).substring(0, 8)
  3. let seed = 31
  4. let hash = 0
  5. for (let i = 0; i < 8; i++) {
  6. hash = hash * seed + md5Str[i].charCodeAt()
  7. i++
  8. }
  9. return hash & 0x7FFFFFFF
  10. }
  • md5key处理成一个32位的字符串,取前8位
  • hash处理成一个整数返回

假设配置两台服务器,则可以如下映射:

  1. let servers = [{
  2. host: '192.168.1.12',
  3. port: 6397
  4. }, {
  5. host: '192.168.1.20',
  6. port: 6397
  7. }]
  8. let key = 'key'
  9. let value = 'value'
  10. let config = servers[hash(key) % 2]
  11. const memcached = new Memcached(config)

一致性Hash分布

在服务器数量不发生变化时,普通Hash可以很好地运作。但是当服务器数量发生改变时,增加一台服务器,同一个key经过hash之后会跟增加之前的结果不一样,这会导致数据丢失。为了把丢失的数据减少到最少,可以使用一致性Hash算法。具体可参考一致性Hash原理与实现

参考

使用Node.js搭建静态资源服务器

JS-LRU-Cache

一致性Hash原理与实现

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/515999
推荐阅读
相关标签
  

闽ICP备14008679号