前端技巧:禁止浏览器static files缓存篇(转)

前端技巧:禁止浏览器static files缓存篇



由于CSS/JS文件经常需要改动,前端调试时是不希望浏览器缓存这些文件的。

本文记录博主的经验。

Meta法

目前在chrome调试还没有遇到问题,好用!此方法假设浏览器是个好人!很听我们的话!

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

如果不明白,可以看我的另一篇文章HTML5 meta标签的总结

随机数法 Cache Buster

随机数法本身相当于渲染模板时添加版本号,在某些版本的浏览器,此法无效。此方法假设浏览器是个小坏蛋!他有可能调皮,不听我们的话!

<script>
    var js = document.createElement("script");
    js.src = "test.js?random" + Math.random();
    document.body.appendChild(js);
</script>

Static asset revisioning

以上两个在chrome调试是没有问题的,但是微信浏览器,这些都可能无效。也就是说浏览器变身彻头彻尾的大流氓,它就是和你唱反调!这时候你需要修改文件名!也可以说这才是利器!

原理就是利用文件的md5,文件内容变化了,在文件名后面自动添加md5值。可以写个脚本,或者利用现成的工具!如gulp-rev

申明:

此文章由The_Third_Wave发表于:http://www.ttwshell.com/ ,转载需带上此声明和本文链接。

时间: 2024-08-23 20:00:41

前端技巧:禁止浏览器static files缓存篇(转)的相关文章

filter 过滤器 禁止浏览器缓存

1 public class BrowserNoCacheFilter implements Filter { 2 public void init(FilterConfig filterconfig) throws ServletException { 3 } 4 public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterchain) throws IOException,

Filter 禁止浏览器缓存动态资源,例如JSP资源 -学习笔记

当访问一个web资源时,没有得到对应的结果,有可能是Filter没有放行资源静态资源和动态资源进行不同的缓存处理,代码如下:====NO2判段是否以jsp结尾 处 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; imp

【禁止缓存】如何禁止浏览器缓存页面内容

浏览器为了避免频繁地与服务器交互,提供了缓存功能.当频繁地访问同义jsp页面时,浏览器会将缓存中的结果取出为用户响应,并不向服务器发送请求,因此经常出现不能反映服务器最新处理结果的情况. 如果某个 jsp 或 servlet程序不需要客户浏览器缓存其相应内容,可以添加如下代码: response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-

前端必读:浏览器内部工作原理

前端必读:浏览器内部工作原理 作者: Tali Garsiel  发布时间: 2012-02-09 14:32  阅读: 56974 次  推荐: 88   原文链接   [收藏] 目录 一.介绍 二.渲染引擎 三.解析与DOM树构建 四.渲染树构建 五.布局 六.绘制 七.动态变化 八.渲染引擎的线程 九.CSS2可视模型 英文原文:How Browsers Work: Behind the Scenes of Modern Web Browsers 一.介绍 浏览器可以被认为是使用最广泛的软

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

浏览器http的缓存机制

原文出处-----分享从伯乐在线看到的一篇好文章  http://web.jobbole.com/85509/ 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望尽量总结的更详尽些. 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页的时候,会发现不管怎么刷新页面,静态资源基本都是返回 200(from cache):

浅谈浏览器http的缓存机制

针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想"回归"下基础,也希望尽量总结的更详尽些. 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页的时候,会发现不管怎么刷新页面,静态资源基本都是返回 200(from cache): 随便点开一个静态资源是酱的: 哎哟有Response报头数据呢,看来服务器也正常返回了etag什么鬼的

面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

透过浏览器看HTTP缓存[转载]

http://www.admin10000.com/document/6299.html 作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关的部分,站点没有做任何缓存机制,我们的页面可能会因为资源的下载和渲染变得很慢,但大家都知道去找前端去解决页面慢的问题而不会去找服务端的开发人员.因此,了解相关的缓存机制和充分的利用它似乎就变得必不可少. web端的缓存机制其实有多种,我在这里只是学习和整理了以浏览器为载体的HTTP缓存机制,看看它是如何工作