当前位置: 首页 > 知识库问答 >
问题:

javascript - 前端到底怎样来操作或者说设置缓存?

黄逸清
2024-03-07

问一个好像很搞笑的问题,就是前端到底怎样来操作或者说设置缓存?搜索了一波,都在给科普缓存的字段什么意思,没有一个说到前端到底如何设置缓存,我的头都大了。懂的朋友麻烦告诉我好吗?谢谢了。

共有3个答案

万喜
2024-03-07

缓存是个很复杂的东西,从后往前可以分为很多层级:

  1. 数据层的缓存
  2. CDN/网关层的缓存
  3. 浏览器缓存

    1. 浏览器缓存内部又可以分成内存、硬盘等
  4. 开发者主动 service worker 控制缓存

实际上通常来说,前端并不需要手动控制缓存,至少在我有限的开发生涯里,需要手动控制缓存的场景极少。

前端要做的,是合理使用缓存。比如:

  1. 知道构建产生的 hash 值就是用来合理使用缓存的;
  2. 所以构建产生的 html 不应该缓存;
  3. 静态资源应该尽量独立,这样可以更好的利用缓存;
  4. URL 里的 search 部分可以帮助缓存
芮朗
2024-03-07

缓存分多种,他们说的是 http 缓存,那看来不是你要的。

楼上有个评论说了 Service Workers,这个是 http 前的一个缓存地,除了能拦截 http,也能接收一些 message 。

再往前说,就是 webSql、DB、localStorage、cookie 这些本地缓存了,也可以理解为持久化缓存。

再往前说,就是直接内存缓存了

以上就是和前端相关所有缓存了

呼延高超
2024-03-07

在前端开发中,操作或设置缓存通常涉及两个方面:HTTP缓存和浏览器缓存。

1. HTTP缓存

HTTP缓存是一种由服务器和客户端(如浏览器)共同实现的机制,用于减少不必要的网络请求,提高网页加载速度。HTTP缓存主要通过HTTP响应头中的几个字段来实现,包括Cache-ControlExpiresLast-ModifiedETag等。

然而,作为前端开发者,你通常不能直接设置这些HTTP头。这些设置是由后端服务器来完成的。你可以建议后端团队设置适当的缓存策略,以便优化你的应用程序。

2. 浏览器缓存

浏览器缓存是指浏览器将之前下载的资源存储起来,以便在再次需要时直接从本地加载,而不是从网络重新下载。作为前端开发者,你可以通过一些手段来影响浏览器缓存行为。

利用meta标签

在HTML页面的<head>部分,你可以使用<meta>标签来设置缓存时间。例如:

<meta http-equiv="Cache-Control" content="max-age=3600">

这会告诉浏览器缓存该页面1小时(3600秒)。但请注意,这种方法的控制力度有限,而且并非所有浏览器都支持。

利用Service Workers

Service Workers是浏览器提供的一种可以在浏览器后台独立运行于主线程之外的脚本,它可以拦截和处理网络请求,包括缓存资源。通过Service Workers,你可以实现更细粒度的缓存控制。

例如,你可以使用Service Workers来缓存API响应、静态资源等。当用户再次访问这些资源时,可以直接从缓存中加载,而不是从服务器重新请求。

利用浏览器的缓存策略

大多数现代浏览器都有默认的缓存策略,会根据HTTP响应头中的缓存字段来自动缓存资源。作为前端开发者,你可以通过检查网络请求的响应头来了解浏览器是如何缓存资源的。

总结

虽然前端开发者不能直接设置HTTP缓存头,但可以通过一些手段来影响浏览器缓存行为。如果你希望更深入地控制缓存,建议与后端团队沟通,协商合理的缓存策略。同时,利用Service Workers等技术可以实现更细粒度的缓存控制。

 类似资料:
  • 这两种方式都可以引用state里的某个变量,让我们更简洁的去使用它,而不需要写一长串前缀,我的疑问是这两个有什么区别?后者这么写也能实现目标,那为什么还有mapState的存在呢?是不是就显得多余了。

  • 需求是在缓存中存放一条数据, 并且设置有效时间1分钟? 应该怎么实现? 在文档中没有找到设置时间的方法 https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/setItem

  • 可以为某个或者某些操作指定前置执行的操作方法,设置 beforeActionList属性可以指定某个方法为其他方法的前置操作,数组键名为需要调用的前置方法名,无值的话为当前控制器下所有方法的前置方法。 ['except' => '方法名,方法名'] 表示这些方法不使用前置方法, ['only' => '方法名,方法名'] 表示只有这些方法使用前置方法。 示例如下: <?php namespace

  • ts怎样得到value的类型 ['单选题','多选题','判断题',]

  • 有人给我发了这个,声称这是Brainfuck中的hello world(我希望如此…) 我知道它的基本原理是通过移动指针和递增或递减来工作。。。 但我还是想知道,它到底是如何工作的?它首先是如何在屏幕上打印任何东西的?它是如何编码文本的?我完全不明白。。。

  • line-height是设置行高,但是有一个问题,我不希望第一行的top和最后一行bottom也被影响,言外之意就是我只想设置段落内的间距,这该怎么做呢?