DB2 学习笔记

前日看网站日志，发现IE 与Firefox 在对待外联CSS 上的一些细微差别。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />

对待这样的CSS定义，Firefox 会把screen.css 完整下载两次，而IE 仅仅会有一次访问。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

但是对于另外一项，它们却有不同的表现。

<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview"/>
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />

Firefox 针对print.css 访问了一次，而IE 则有两次，第二次是http 304 ，也属于正常。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/print.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11" 

再来看另外一个例子，screen.css 与screen-clearstyle.css 均引用了base.css 和extend.css 。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />

@import "base.css";
@import "extend.css";

对于多个CSS 文件引用的同一个CSS，Firefox 不会再去检查文件修改日期，而IE 照例进行了多次访问，虽然后续仅访问了header，如果引用比较复杂的话，还是有一些可观流量的。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/base.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

通过这次测试，还学习了一点额外的东西，对于浏览器来说，F5 与CTRL+F5 有一些区别，虽然都是刷新，但F5 仅仅会重新获取相比cache 有所更新的文件，CTRL+F5 则强制性重新获取所有文件。另外提一点，在Firefox 中，F5 与工具栏中的刷新按钮，或者是菜单中的刷新项(CTRL+R)，效果都一样，IE 也是如此。

顺便把CSS 切换功能 给取消了，还是保持简单点好。因此上面的部分代码，在页面源文件中已经找不到了，下面是个完整的参考：

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/common.css" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-linestyle.css" media="screen" title="LineStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/aural.css" media="aural" />
<script type="text/javascript" language="javascript" src="http://www.aiview.com/switch-css.js"></script>