浏览器缓存

简介: HTTP缓存通过Cache-Control和ETag实现。Cache-Control控制缓存行为,如public/private、no-cache/no-store,以及max-age等时效与验证机制;ETag则用于对比资源是否变更,配合If-None-Match实现304协商缓存。结合内容哈希文件名可优化静态资源更新策略,确保用户获取最新版本。

Note
Http 的缓存主要利用 header 里的Cache-control 和 ETag
1.Cache-control
1.1 Cache-control主要字段
● public
○ 指HTTP请求返回的资源在所经过的所有路径包括一些中间代理服务器以及发出这个请求的客户端浏览器都可以进行缓存
● private
○ 代表发起请求的浏览器才可以进行缓存
● no-cache
○ 指可以存缓存,但是每次使用都需要去服务端验证
● no-store
○ 本地和代理服务器都不允许去缓存
● no-transform
○ 不允许代理/缓存服务器转换文件格式
1.1.1 到期
● max-age=
○ 缓存到期时间
● s-maxage=
○ 代理服务器专用
● max-stale=
○ 指示客户机可以使用超出max-age时间的响应
1.1.2 重新验证
● must-revalidate
○ 设置了max-age的资源过期后必须到源服务端验证资源是否还可用
● proxy-revalidate
○ (缓存服务器用)设置了max-age的资源过期后必须到源服务端验证资源是否还可用
1.2 Etag
1.2.1 ETag资源标识码
即用来进行对比缓存,Etag 是服务端资源的一个标识码
当客户端发送第一次请求时服务端会下发当前请求资源的标识码 Etag,下次再请求时,客户端则会通过 header 里的 If-None-Match 将这个标识码 Etag 带上,服务端将客户端传来的 Etag 与最新的资源 Etag 做对比,如果一样,则表示资源没有更新,返回 304。

  1. 缓存方案
    2.1 需求
    有的静态资源会设置一个较长的缓存时间,但是我们希望用户还是能使用最新的资源。
    2.2 解决方案
    在打包完成的文件名上加上一串哈希码,这个哈希码是根据内容进行的哈希计算。 所以,如果你的内容文件没有变,那么这个hash码不会变,即这个静态资源的url没有变。 而如果内容有变,那么hash码也会变,浏览器就会去请求新的资源请求。
    2.3 普通的缓存机制

2.4 资源验证
如果给Cache-Control设置了no-cache后,每次要使用资源时浏览器都要到服务器验证缓存是否过期。 如果直接使用缓存,返回码:304
2.5 如何验证资源是否过期:
● Last-Modified(上次修改时间)
○ 配合 If-Modified-Since 或 If-Unmodified-Since 使用
○ 如果请求的资源头中有Last-Modified这个头,这个头指定了一个时间。那么浏览器重新访问资源时就会带上If-Modified-Since这个头,其时间是Last-Modified的时间,服务器就会拿这个时间去对比上次修改的时间,然后告诉浏览器是否可以直接使用。
● Etag (数据签名)
○ 资源会依据它的内容产生一个唯一的数据签名,如果资源有更新,那么Etag就会发生变化。
○ 配合 If-Match 或 If-None-Match 使用

相关文章
|
9月前
|
JavaScript 前端开发 测试技术
Angular框架
本文深入解析Angular核心概念,涵盖ng-show与ng-if的性能差异、$rootScope与$scope的关系、表达式机制、Digest周期、定时器与监听器的取消方法。同时探讨Directive的restrict属性、作用域绑定方式及模块间通信策略。此外,介绍性能优化技巧、单元测试实践、Angular 2生命周期钩子、路由机制、事件发射器、AOT编译、安全防护与Shadow DOM等高级主题,全面提升开发技能。
|
5月前
|
JavaScript 前端开发 大数据
前端组件 ——MUI X Data Grid 知识点大全(二)
教程来源 http://qcycj.cn 本节详解 MUI X Data Grid 的核心列/行管理、分页、性能优化、编辑与导出功能:支持列宽调整/拖拽排序/固定/分组,行高自适应与多级排序筛选,客户端/服务端分页,DOM 虚拟化(万级数据流畅渲染),单元格/行级编辑及 CSV/Excel(Premium)导出。
|
9月前
|
缓存 前端开发 JavaScript
雅虎14条Web性能优化规则
雅虎军规总结了23条前端性能优化最佳实践,涵盖减少HTTP请求、使用CDN、资源压缩、缓存配置、JS/CSS优化、图片处理等方面,旨在提升网页加载速度与用户体验,是前端性能优化的经典指南。
|
9月前
|
JavaScript
虚拟滚动技术
插入几万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比requestAnimationFrame分批插入,虚拟滚动性能更优,推荐使用react-virtualized等库实现,有效提升渲染效率。(238字)
|
9月前
|
缓存 JavaScript 前端开发
重绘回流过程
浏览器渲染流程:解析HTML生成DOM树,CSS生成CSSOM,合并为渲染树,再布局、绘制。DOM树包含所有元素,渲染树仅含可见节点。CSS阻塞渲染但不阻塞DOM解析。重绘因样式变化,回流因布局变化,回流必触发重绘。减少回流重绘可提升性能。
|
9月前
|
Java API
用数组实现队列/栈
使用数组实现栈时,可将动态数组尾部作为栈顶,利用其O(1)增删特性。Java中可用ArrayList或自定义MyArrayList实现push、pop、peek等操作。若以头部为栈顶,则需环形数组(如CycleArray)支持O(1)首部操作。同理,结合CycleArray的addLast与removeFirst,亦可高效实现队列。
|
9月前
|
Java 索引 容器
环形数组技巧
环形数组通过模运算在逻辑上将线性数组首尾相连,利用start和end指针实现O(1)时间内的头尾增删。虽不改变数组本质,却大幅提升操作效率,常用于队列等场景。
|
9月前
|
Java API
用链表实现队列/栈
本文介绍如何用链表实现栈和队列,利用双链表头尾操作均为O(1)的特性,高效实现栈(push/pop)和队列(入队/出队)。代码简洁,逻辑清晰,适用于理解基础数据结构的底层实现。
|
人工智能 Serverless API
函数计算的云上计费演进:从请求驱动到价值驱动,助力企业走向 AI 时代
函数计算计费方式历经三阶段演进:从按请求计费,到按活跃时长毫秒级计费,再到按实际资源消耗分层计费。背后是资源调度、安全隔离与开发体验的持续优化。尤其在AI时代,低负载减免、会话亲和等技术让计费更贴近真实价值,推动Serverless向“按需使用、按量付费”终极目标迈进。
|
Java 定位技术
陌陌动态留联系方式怎么防止被检测到?只需要插件
本资源提供一种通过技术手段(如hook或对接第三方地图)规避陌陌联系方式被和谐的方法,同时包含一份地图名称生成器的Java代码示例。

热门文章

最新文章