美文网首页
前端静态资源如何实现缓存

前端静态资源如何实现缓存

作者: 欣然_d10f | 来源:发表于2019-04-05 19:01 被阅读0次

缓存分类

强缓存 (一般不会向服务器发起请求)

** 服务端通过Cache-control(http1.1) Expires(http1.0)字段设置, Cache-control优先级高于Expires**

Cache-control 常用属性值:

private: 私有缓存设备(浏览器)
public: 公有缓存设备(cdn )
max-age: 时间段,指定缓存最大有效时间,秒为单位如(360000) 在private设备中取资源,状态码200
s-maxAge: 时间段,指定缓存最大有效时间,秒为单位如(360000) 在public设备中取资源 同时设置的时候优先级高于max-age.状态码304
no-cache: 会把强缓存机制改为协商缓存,会像服务端发起请求,资源是否取缓存取决于服务端响应头字段(last-modifed等)
no-store: 该资源不会读取缓存

Expires: 属性值为通常为UTC时间格式

协商缓存 (会向服务端发起请求,向服务端询问是否可以使用缓存)

对应的http header字段 Last-modifed, Etag

Last-modifed

原理:通过读取文件最后修改日期和请求头中'if-modified-since'做比较,如果相等的话就返回304,客户端就可以使用缓存文件,如果不相等就返回200和最新的文件,同时响应头加上'Last-Modifed'字段。
属性值:UTC格式的时间

Etag (优先级高于Last-modifed)

原理:一般使用文件的版本号为属性值,通过对比请求头中的if-none-match字段的版本号字符与文件的版本号字符对比,如果没有变化就告诉客户端可以使用缓存。
属性值:能标识请求文件的字符串
总结一下流程图:


未命名文件.jpg

相关文章

  • 前端静态资源如何实现缓存

    缓存分类 强缓存 (一般不会向服务器发起请求) ** 服务端通过Cache-control(http1.1) Ex...

  • 网站优化

    网站优化 前端优化合并js,css,图片等资源,减少http请求次数开启http缓存使用CDN缓存资源和静态页面,...

  • http协议之浏览器缓存

    前端静态资源并不是每一次都发生变化,那么浏览器会根据协议定义的缓存头来缓存静态资源 关于浏览器的缓存头有 cach...

  • webpack hash哈希值

    静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。回到本文主...

  • 利用gulp进行静态资源版本控制(url?v=md5)

    遇到的问题 服务器端静态资源更新,客户端有缓存,未能获取到最新的静态资源,导致前端效果未达到预期。 期望 服务器端...

  • webpack + vue 项目, 版本更新问题

    问题:前端脚本重新编译后,静态资源由于浏览器缓存而无法重新加载,出现 'Loading chunk " + xx ...

  • 网站慢优化

    静态资源:gzip(压缩静态资源加快响应速度) expires(缓存到客户端,减少http请求)cdn(缓存到客户...

  • http 缓存之实践联系

    使用场景说明 前端部署的资源是静态文件,大致可分为两类 html css、js、img、iconfont 强制缓存...

  • Apache站点优化-静态缓存

    静态缓存 静态缓存介绍 静态缓存实现 一、静态缓存介绍 用户每次访问网站都会将页面中的所有元素都请求一遍,全部下载...

  • 静态资源缓存

    过期机制 校验是否过期 服务器配置Expires 客户端显示 Cache-Control:max-age...

网友评论

      本文标题:前端静态资源如何实现缓存

      本文链接:https://www.haomeiwen.com/subject/ankkiqtx.html