浏览器缓存

简介: 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 使用

相关文章
|
18小时前
|
XML JavaScript 前端开发
Vue框架
本文深入解析Vue核心原理,涵盖v-bind与v-model区别、响应式机制(Object.defineProperty)、模板编译为render函数、虚拟DOM渲染流程、数据双向绑定原理及MVVM模式。详解生命周期、组件通信、路由控制、Vuex状态管理及其内部实现,并对比jQuery与框架差异,系统梳理Vue源码设计思想与实践应用要点。
|
17小时前
|
存储 缓存 JSON
前端工程化
Webpack是模块打包工具,支持ES6、代码分割与模块化,区别于Grunt/Gulp等构建工具。webpack4新增mode参数,优化打包策略,支持Tree-shaking、splitChunks提取公共代码,提升构建效率与性能。通过loader处理非JS资源,plugin扩展功能,实现高效前端工程化。
|
17小时前
|
缓存 监控 JavaScript
前端性能监控指标
前端性能指标包括白屏时间、首屏时间、DOM可操作时间和页面总加载时间。可通过注入代码或`window.performance` API进行量化统计,后者基于浏览器标准接口,提供精确的网络、解析与渲染各阶段耗时数据,助力性能优化。
|
17小时前
|
缓存 前端开发 JavaScript
雅虎14条Web性能优化规则
雅虎军规总结了23条前端性能优化最佳实践,涵盖减少HTTP请求、使用CDN、资源压缩、缓存配置、JS/CSS优化、图片处理等方面,旨在提升网页加载速度与用户体验,是前端性能优化的经典指南。
|
17小时前
|
缓存 JSON JavaScript
Webpack性能优化
通过按需加载、Tree Shaking、Scope Hoisting 减小打包体积;利用 HappyPack、DllPlugin、优化 Loader 提升打包速度;结合代码压缩与长缓存优化,显著提升 Webpack 构建性能。Webpack4 后 mode 设为 production 可自动启用多数优化。
|
17小时前
|
域名解析 缓存 网络协议
网络优化方案
通过合并压缩资源、合理缓存、DNS预解析、CDN加速、预加载与预渲染、图片优化等手段,减少HTTP请求、提升加载速度。利用hash值更新缓存,结合雪碧图、WebP格式及骨架屏,显著改善页面性能与用户体验,有效降低首屏加载时间。
|
17小时前
|
JavaScript
虚拟滚动技术
插入几万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比requestAnimationFrame分批插入,虚拟滚动性能更优,推荐使用react-virtualized等库实现,有效提升渲染效率。(238字)
|
20小时前
|
机器学习/深度学习 人工智能 自然语言处理
Chap01. 认识AI
本文介绍AI核心概念与大模型开发原理,涵盖人工智能发展历程及Transformer神经网络的关键作用。通过注意力机制,Transformer实现对文本、图像、音频的高效处理,成为GPT等大模型的基础。大语言模型(LLM)利用其持续生成能力,逐字预测输出,实现连贯对话。
|
19小时前
|
存储 API 索引
队列/栈基本原理
本文介绍队列和栈的基本原理。二者均为“操作受限”的数据结构:队列遵循先进先出(FIFO),仅能在队尾入队、队头出队;栈遵循先进后出(FILO),只允许在栈顶进行插入和删除操作。底层多由数组或链表实现,核心API包括push、pop、peek和size,时间复杂度均为O(1)。
|
18小时前
|
Java API
用链表实现队列/栈
本文介绍如何用链表实现栈和队列,利用双链表头尾操作均为O(1)的特性,高效实现栈(push/pop)和队列(入队/出队)。代码简洁,逻辑清晰,适用于理解基础数据结构的底层实现。