解决缓存引发的CSS/JS/IMG问题
2014-02-23 00:00
363 查看
摘要: 解决缓存引发的CSS/JS/IMG问题
这次转载的文章讲的是CSs缓存的问题。CSS一般情况下,我们都会做一定的缓存,毕竟这玩意很少会动它,但对于一个稍大一点的网站来说,它就可能会经常变动了。
然而,CSS对于浏览器来说,一般情况下是会被自动缓存的,所以我在导入CSS的时候,都会制定一个版本号放在文件后面如:xxx.css?20091010,下次更新的时候,把这个日期改一下。用户在加载的时候会认为这是一个新文件 。。。
以下是博客园的用户写的文章 :
如何平衡的使用浏览器缓存?平时我们借助缓存来减少用户加载页面文件(比如js,css,image等)的时间和带宽,同时我们要确保用户访问的上述文件时最新的。而后者是我们常常头疼的问题。
本文主要介绍一些小的技巧来确保在网站文件被缓存的同时,又可以得到良好的性能和最新的更新的网站内容。
问题描述
比如我们在某页面加载了css文件,
<link rel="stylesheet" href="/css/styles.css" type="text/css" />
如何优化页面访问的性能呢?
手段1、使用缓存。通常我们希望此文件被浏览器缓存一定的时间,这样可以用户访问此页面的时候不必每次都向服务器请求下载此文件。我们也可以配置服务器在页面添加”Expires”头信息,从而告诉浏览器缓存此文件的时间。
手段2、我们使用yuicompressor等压缩工具对css文件进行压缩,减小文件的大小。
问题是当因版面风格的更新,此css已经做了更新,但是用户可能仍然使用的是旧的页面主题,甚至错乱的页面。这样对用户的体验非常不好。
解决之道:
根本原理:欺骗浏览器,让它认为它加载的文件跟缓存的文件不一样。
方法一、修改文件名
<link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
方法二、增加Query string
<link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
方法三、修改引用文件路径
这里最好的是在服务器配置文件中进行配置来实现文件路径映射(url mapping)。
<link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
以上我们以css为例进行了说明,我们来看看图片和js文件。
Images
由于图片的引用一般写在css文件中,并采用相对路径,所以当css的引用路径发生变化的时候,根据重写规则,图片被解析的路径自然会同步发生更新。
JS
适用于css的方法同样都适用于JS。
结束语
当然web站点性能的优化,除了缓存之外,还有许多的方法。比如我们可以借助YSlow来帮助用户得到最好的体验。
其实方法都差不多。为了所谓的 yahoo 的N条军规,大家都在互相折腾。
之所以是N,是因为以前是14条,后来加过两次。就忘了几条了。firebug的插件yslow也可以做简单的测试哦
作者:MingleLui
出处:http://mingle.cnblogs.com/
这次转载的文章讲的是CSs缓存的问题。CSS一般情况下,我们都会做一定的缓存,毕竟这玩意很少会动它,但对于一个稍大一点的网站来说,它就可能会经常变动了。
然而,CSS对于浏览器来说,一般情况下是会被自动缓存的,所以我在导入CSS的时候,都会制定一个版本号放在文件后面如:xxx.css?20091010,下次更新的时候,把这个日期改一下。用户在加载的时候会认为这是一个新文件 。。。
以下是博客园的用户写的文章 :
如何平衡的使用浏览器缓存?平时我们借助缓存来减少用户加载页面文件(比如js,css,image等)的时间和带宽,同时我们要确保用户访问的上述文件时最新的。而后者是我们常常头疼的问题。
本文主要介绍一些小的技巧来确保在网站文件被缓存的同时,又可以得到良好的性能和最新的更新的网站内容。
问题描述
比如我们在某页面加载了css文件,
<link rel="stylesheet" href="/css/styles.css" type="text/css" />
如何优化页面访问的性能呢?
手段1、使用缓存。通常我们希望此文件被浏览器缓存一定的时间,这样可以用户访问此页面的时候不必每次都向服务器请求下载此文件。我们也可以配置服务器在页面添加”Expires”头信息,从而告诉浏览器缓存此文件的时间。
手段2、我们使用yuicompressor等压缩工具对css文件进行压缩,减小文件的大小。
问题是当因版面风格的更新,此css已经做了更新,但是用户可能仍然使用的是旧的页面主题,甚至错乱的页面。这样对用户的体验非常不好。
解决之道:
根本原理:欺骗浏览器,让它认为它加载的文件跟缓存的文件不一样。
方法一、修改文件名
<link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
方法二、增加Query string
<link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
方法三、修改引用文件路径
这里最好的是在服务器配置文件中进行配置来实现文件路径映射(url mapping)。
<link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
以上我们以css为例进行了说明,我们来看看图片和js文件。
Images
由于图片的引用一般写在css文件中,并采用相对路径,所以当css的引用路径发生变化的时候,根据重写规则,图片被解析的路径自然会同步发生更新。
JS
适用于css的方法同样都适用于JS。
结束语
当然web站点性能的优化,除了缓存之外,还有许多的方法。比如我们可以借助YSlow来帮助用户得到最好的体验。
其实方法都差不多。为了所谓的 yahoo 的N条军规,大家都在互相折腾。
之所以是N,是因为以前是14条,后来加过两次。就忘了几条了。firebug的插件yslow也可以做简单的测试哦
作者:MingleLui
出处:http://mingle.cnblogs.com/
相关文章推荐
- 解决缓存引发的CSS/JS/IMG问题
- 96. Spring Boot之静态资源版本映射(解决js/css缓存问题)
- 解决修改css或js文件,浏览器缓存更新问题。
- js、css、img等浏览器缓存问题的2种解决方案
- 【转载】web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- ASP.net解决CSS与JS的缓存问题
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- gulpfile.js自动化解决js、css缓存问题(添加版本号)
- 如何解决HTML5页面js,css缓存问题
- [Filter过滤器]解决缓存网站图片,css,js等问题
- 页面防止js,css等缓存问题解决办法
- js,css,img等浏览器缓存问题解决方案
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 前端资源多个产品整站一键打包&包版本管理(四)—— js&css文件文件打包并生成哈希后缀,自动写入路径、解决资源缓存问题。
- jsp中使用随机数解决js、css缓存问题
- js、css、img等浏览器缓存问题的2种解决方案
- js+ant版本控制,解决js、css缓存问题
- 基于md5的解决js,css缓存问题for django
- js、css、img等浏览器缓存问题的2种解决方案