惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
大猫的无限游戏
大猫的无限游戏
J
Java Code Geeks
罗磊的独立博客
雷峰网
雷峰网
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
爱范儿
爱范儿
B
Blog RSS Feed
腾讯CDC
Apple Machine Learning Research
Apple Machine Learning Research
D
Docker
Recent Announcements
Recent Announcements
T
Tailwind CSS Blog
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Vercel News
Vercel News
小众软件
小众软件
人人都是产品经理
人人都是产品经理
云风的 BLOG
云风的 BLOG
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
I
InfoQ
S
SegmentFault 最新的问题

博客园 - jblzg

用powershell脚本实现Andoird为不同市场编译、签名自动化,效率极大提高 JSON与Protocol Buffers Visual Studio 2008提高工作效率的小技巧 转:批处理获得任意天前的日期 SQL Server 2008 事务日志物理文件尺寸无法减小的解决办法(含日志收缩(shrink)技巧) 用虚拟机实际体验Google Chromium OS (Chrome OS) Pre-Built 2009年互联网5大趋势之一:结构化的数据 由一个案例引出SQL注入防范(WebKnight),补救(数据修复)的思考 参加Google Developer Day 2009归来 网站首页、频道首页静态化的问题 宽高比例不固定的用户头像纵向居中的方法(不使用表格、代码精简、图片不变形) Canonical URL Tag - 继SiteMap之后最重要的搜索引擎优化实践 - jblzg 金额字符串转换成Decimal格式的怪问题引发的思考 对常规启用 IIS6.0 Gzip 方法的补充,用于解决wget、curl等无法得到压缩结果的问题 FCKeditor.NET的配置、扩展与安全性经验交流 搜狐博客列表页面分析 避免修改Web.config的appSettings配置时导致的所有页面重编译 参加Google Developer Day 2008归来 一次有趣的Debug——使用Lumigent Log Explorer对SQL Server事务日志进行分析,对SQL Server事务、操作进行撤销(恢复)
ASP.NET Web 开发中的静态资源(JS、CSS、图片)版本控制
jblzg · 2008-10-14 · via 博客园 - jblzg

引言

“公司网站的一次改版后,大批用户反映看到的页面出现错乱的情况,也有不少用户表示他们对这次的改版非常满意。不同的用户竟然看到了不同的效果……”

上面的情形,相信不少同仁都遇到过,在不同PC上看到的网页效果不同。怎么解决这样的问题呢?这就需要做好静态资源的版本控制。

原理

我们先来分析一下出现这个问题的原因:

用户在浏览器浏览某个网页,浏览器在加载网页中包含的各个资源(JS、css、图片)时,先会判断缓存中是否已经包含了此资源(当然这与Header中定义的Cache-Control有关,静态资源很少有设置成不缓存的,我这里默认它们都是可缓存),如果包含,就不去服务器获取了。

比如改版时更改了样式表:Global.css,浏览过网站的用户,缓存里面还存在着Global.css,所以浏览器会“自作聪明”地使用缓存中的版本,自然看到的和我们期望的效果不一样了。

解决方案

如果要让浏览器的缓存更新,就需要改变此资源的URL (统一资源定位符 Uniform Resource Locator)。改变URL不意味着文件需要改名,只需要在文件名后面增加一个后缀,比如:“Global.css?v=yyyyMMddv”,虽然定位到的资源仍然是Global.css,但如果v的值不同,浏览器会认为是不同的资源。同理,对于JS、图片来说,也是如此。

也就是说,我们每次对静态资源有更改,只需对其URL做相应更改,所有的用户就能够获取到最新的资源。

我们再来分析一下这个URL:
Global.css?v=yyyyMMddv

Global.css 资源的位置
v 可随意定义,这里的v代表“version”
yyyyMMddv 可随意定义,这里用“年 + 月 + 日 + 当天修订版本”,这样的URL可读性比较强。也有用随机字符串代表的

新的问题

在解决了上述问题后,我们可能又会遇到新的难题:如果某个CSS或者JS被上百个页面所引用,每个引用的URL又不尽相同,结果是用户看到的同样的样式定义,在页面A和页面B的效果是不一样的。如何能统一,又能有效控制所有页面引用资源的URL呢?

改进后的解决方案

本文标题是:“ASP.NET Web 开发……”,那我们这里就看一下ASP.NET的方法:

定义一个用户控件:CssGlobal.aspx:

1<link rel="stylesheet" type="text/css" href="http://demo.com/CSS/Global.css?v=yyyyMMddv" />

在所有需要引用Global.css的页面上,使用该控件替代传统的引用:

1<%@ Register Src="~/CssGlobal.aspx" TagName="CssGlobal" TagPrefix="uc1" %>
2
3<head runat="server">
4    <title>Title</title>
5    <uc1:CssGlobal ID="CssGlobal1" runat="server" />
6</head>

以后凡是有Global.css的更改,只需要修改用户控件CssGlobal.aspx中Global.css的URL即可

对于JS、图片等其他静态资源,我们也可以用同样的方法实现良好的版本控制

本方案的缺点

1、无法在“设计”视图里看到实时的效果。不过如果美工与程序分离的不错的情况下,相信这不是大的问题;

2、在静态页面,比如.html或者.htm等无法使用用户控件的页面里,没有更好的办法。

在此抛砖引玉,期待各位同仁更好的解决方案。

更新:

2008-10-14 23:42 | 12楼 chunchun的方案

对于aspx页面不需要走用户控件,aspx支持SSI命令,直接写一个CssGlobal.inc文件,文件内容:<link rel="stylesheet" type="text/css" href="http://demo.com/CSS/Global.css?v=yyyyMMddv" />

在需要引用该CSS的页面的位置<!--#include file="CssGlobal.inc"-->

最终生成的页面是经过Ssinc.dll解析的,只会看到<link rel........不会看到<!--#include ......

对于静态页面,CV文章生成页面可以生成shtml文件(或.stm、.shtm )不生成.html这样在页面中都可以用<!--#include file="CssGlobal.inc"-->

改版时要更改样式的版本号只需修改CssGlobal.inc这一个文件即可,动,静态页面都跟着改变。

对于象logo图片这种百年不变的东西 可以象baidu的节日logo那样设一个N长的客服端缓存,客户端第一次加载完了后基本在他重装系统或清浏览器缓存之前都不会到服务器下载,节省很多带宽。 换logo图片时修改的图片名。