前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端缓存之HTTP缓存

前端缓存之HTTP缓存

作者头像
wade
发布2020-04-23 17:16:42
5980
发布2020-04-23 17:16:42
举报
文章被收录于专栏:coding个人笔记

说真的,当自己还很小白的时候,明明修改了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缓存,希望可以指教一下。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档