专栏首页coding个人笔记前端缓存之HTTP缓存

前端缓存之HTTP缓存

说真的,当自己还很小白的时候,明明修改了JS的内容了,但是就是没有加载成功,那时候感觉好神奇,好没道理。后来知道了这是因为缓存的原因。

说实话,现在基于各种框架的开发,基本上没有在业务代码过程中关注缓存的事情了,当然,不包括使用localstorage和cookie。今天自己学习了一些关于前端缓存的东西,不一定有什么特别的用,仅让自己知道缓存,说不定哪天就用上了。

前端分为HTTP缓存和浏览器缓存。HTTP缓存几乎没用过,也不知道有没有不经意间使用了,因为HTTP缓存主要是服务器代码上设置的。

HTTP第一次请求之后,服务器会在返回的头部传回缓存的参数。然后第二次请求的时候浏览器判断这些参数是什么缓存类型,相应的返回。

HTTP缓存有强缓存和协商缓存(也有人叫对比缓存)。

强缓存:

HTTP状态码是200,F5刷新和CTRL+F5刷新无效,强缓存一般用到两个key:

Expires:缓存过期时间,再次发起请求之后,浏览器会先判断是否在有效期之内,如果是就直接使用本地缓存,不会去请求。有一个缺点就是,有效期是服务器给的,不排除本地时间跟服务器有误差,本人认为这个误差可以忽略不计。

Cache-Control,优先级比expires高:有五个参数:

No-cache:缓存了数据,但是请求的时候直接绕过缓存向服务器请求,有些浏览器无效;

No-store:不存储缓存,比No-cache更粗暴;

Max-age:设置时效,在有效时间内直接使用,不去请求。

Public:客户端和服务端都能缓存;

Private:客户端可以缓存;

强缓存其实是比较推荐的,因为不会发起请求,那么应该有人会问,如果强缓存了,那么修改了怎么让客户端更新。其实很简单,给文件加hash值就会请求修改过的文件。

对比缓存(协商缓存):HTTP状态码是304,是由服务器决定的,F5刷新有效,CTRL+F5刷新无效,对比缓存的key是成对出现的:

Last-Modify/If-Modify-Since: 响应端先返回一个last-modified时间,再次请求的时候 request头部会将缓存中的last-modified字段拿出来赋给if-modified-since,发送给服务器,服务器去判断时间是否过期,如未过期则返回304,告诉客户使用缓存数据,如果过期则重新返回一个last-modified并且返回200;

Etag/If-None-Match: 根据实体内容生成的一段hash字符串,可以标识资源的状态。 当资源发送改变时,ETag也随之发生变化。主要是为了解决根据时间无法解决的问题:比如文件修改频繁,导致根据时间无法判断是否更新等。

说了这么多,HTTP缓存跟前端有什么关系?确实,大部分HTTP缓存是由服务器完成,关于前端怎么操作的没查到相关的文档,只知道可以通过meta标签禁用缓存和动态设置header。

缓存对于前端的性能优化算是很大的,推荐使用强缓存,然后用hash值的方法消除强缓存的影响。

如果有人知道前端怎么去操作HTTP缓存,希望可以指教一下。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端缓存之本地缓存

    本地缓存就简单多了,我们常用的有三个:cookie、localStorage、sessionStorage。

    wade
  • Json过滤

    最近在编写接口的时候,后台需要给前端返回数据,但是查询出来的结果中有很多属性是多余,本想着用字符串替换,但是发现好像不太行,多个属性的过滤好像并不太靠谱,于是网...

    wade
  • 哔哩哔哩开源的flvjs

    之前有分享过rtmp和m3u8的直播,后来才有了哔哩哔哩开源的flvjs做,于是就出现了ios不兼容的问题。

    wade
  • 通俗讲解:缓存、缓存算法和缓存框架

    1 引言 我们都听过 cache,当你问他们是什么是缓存的时候,他们会给你一个完美的答案,可是他们不知道缓存是怎么构建的,或者没有告诉你应该采用什么标准去选择缓...

    前朝楚水
  • [NewLife.XCode]对象字典缓存(百万军中取敌首级)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCo...

    大石头
  • [NewLife.XCode]数据层缓存(网站性能翻10倍)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCo...

    大石头
  • 认识浏览器缓存

    关于何为前端缓存,这里结合具体实际给出一个简单的定义:在两次不同的运行时中,能够共享的数据可以成为前端缓存。如何理解两次不同的运行时呢,可以理解为两次不同的页面...

    MarsBoy
  • 微服务扩展性和高可用-缓存(翻译)

    缓存是一种在多个消费端或服务端之间共享数据的技术,计算或获取数据都是非常昂贵的.数据存储和检索在一个子系统中。该子系统提供对频繁访问数据副本的快速访问。

    日薪月亿
  • 突破Java面试(19) - 分布式缓存的第一个问题

    只要问到缓存,上来第一个问题,肯定能是先问问你项目哪里用了缓存?为啥要用?不用行不行?如果用了以后可能会有什么不良的后果?

    JavaEdge
  • 【吊打面试,击中要害】缓存穿透、缓存击穿和缓存雪崩

    2019磕磕碰碰总算过去了,2020年秉承开源共享原则,继续分享在工作中遇到的各种问题和干货。2020年在面试题开始,祝愿小伙伴在2020年都能谋...

    java乐园

扫码关注云+社区

领取腾讯云代金券