阅微堂 » css

加速blog：关于javascript(css)

zhiqiang — Tue, 04 Dec 2007 12:07:22 +0000

这里先谈一下关于javascript和CSS的问题。

压缩你的javascript和css

这里的压缩和前面的GZIP压缩不同，而是压缩空格，去除注释等，调整顺序等。如果你的服务器不支持GZIP压缩，你就更应该使用下面的压缩工具处理你的css和javascript了。

压缩CSS：压缩比率能达到20%到50%。

压缩javascript：即使是最安全的压缩模式，压缩比率也能达到20%到50%。

警告：以上压缩会破坏文档格式，请保留好压缩前文档的备份。

合并javascript和css文件

这种方面比较繁琐，完全是体力活。可以手动把文件内容都复制粘贴到一起，也可以新写一个php文件include所有需要的文件。在加快WordPress的页面生成和载入速度有比较详细的操作方法。

javasctip和css文件位置

一般来说，CSS最好放在HEAD区域内（即之前），这样可以减少页面重绘。javascipt文件越靠后引用越好，比如Google Analytics的统计代码最好放在之前。也可以考虑script的defer属性。

用CSS Sprites让网站再加速

zhiqiang — Tue, 09 Oct 2007 08:30:22 +0000

我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的小技巧，对于网页上固定位置的图片，应该尽量使用CSS背景图片，而不要用img标签嵌入。

为减少页面上的背景图片数量，嵌入式图片是一个好主意，data: URL scheme可以让你把图片信息直接嵌入在CSS语句中，理论上而言这是最好的解决方案。可惜目前IE不支持！又是万恶的IE。下面是效果图(Firefox有效)：

另外一个就是CSS Sprites了，很久以前就见到过，不过操作比较复杂，所以一直没有用。今天，看到一个更详细的介绍，而且Yahoo和Facebook都在用这种方式，见这里和这里。我也决定紧跟一下潮流。

CSS Sprites就是将网页上所有的背景图片都放在一张大图片上，更详细的介绍

在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现......我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

比如本站的所有背景图片已经整合成单独一张，然后通过CSS定义背景：

.bloglines, .zhuaxia, .google, {
    background-image: url(images/b.gif);
}

.bloglines { background-position: 0 -216px; }
.zhuaxia { background-position: 0 -332px; }
.google { background-position: 0 -448px; }

上面这一段代码用同一张背景图片生成了Google，Zhuaxia，Bloglines的订阅图片。效果可见右侧栏的订阅区，与各自指定图片背景效果完全一样。

上面最麻烦的一个地方在于如何生成大图片，利用PhotoShop的Merge功能可以把图片整合在一起，但每个小图片在大图片的位置参数需要一个一个去弄，比较麻烦，但是比较自由。利用CSS Sprites Generator，一切都自动搞定。这个网站支持上传图片的ZIP压缩包，然后生成一张大图片，已经以图片文件名为类名的CSS语句，自动给出每个图片对应的位置。另外还可以设置各个小图片之间的间隔，以适应内容的适度拉伸。

btw，提一下一个APACHE的mod_expires模块，这个模块可以要求服务器缓存制定类型的文件。比如下面的语句(写入.htaccess文件)要求缓存图片, css, js等一个月：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/html A600
IfModule>

不过似乎deamhost和bluehost都没有这个模块，但阅微堂所在的CPH服务器是有的...

Dreamhost上的GZIP & Cache

zhiqiang — Sun, 01 Apr 2007 11:09:54 +0000

用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加起来才14K。

QTY	SIZE#	TYPE	URL
1	6999	HTML	http://zhiqiang.org/blog/
1	2593	SCRIPT	http://zhiqiang.org/blog/.../comment.js.php
1	2302	SCRIPT	http://zhiqiang.org/.../all.js.php
1	2048	CSS	http://zhiqiang.org/.../style.css.php
1	431	IMG	http://feeds.feedburner.com/~fc/zhiqiang
5 ^	14373*		Total (^unique objects)

Dreamhost还用的是Apache 1.3(Am I wrong？)，所以没有mod_deflate模块，而用的是mod_gzip模块，这个模块直接在磁盘上读写，效率比前者要低。不过有总比没有好，毕竟压缩比率很高。

但诡异的是，服务器默认对CSS和JS不作压缩。写信去问了dreamhost客服，也没有什么好方法。最后我采用的方法是用php给包一层：用style.css.php来代替style.css：

php # this is the file style.css.php, who contains style.css
# set the request file name
$file="style.css";

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
$ext = array_pop(explode('.', $file));
switch ($ext){
case 'css':
 header("Content-type: text/css");
 break;
case 'js' :
 header("Content-type: text/javascript");
 break;
case 'gif':
 header("Content-type: image/gif");
 break;
case 'jpg':
 header("Content-type: image/jpeg");
 break;
case 'png':
 header("Content-type: image/png");
 break;
default:
 header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
ob_end_flush();
# set header the content's length;
# header("Content-Length: ".ob_get_length()); # (It doesn't work? )
ob_end_flush();
}
?>

上面代码不仅压缩代码，而且要求浏览器端Cache这个文件。甚至，可以把所有css文件都放到一个php文件里，只要在echo处加入多个文件即可。

下面是一些常用的测试网站：

GZIP Test: 测试一个URL地址是否支持GZIP传输，以及压缩比率。
Web Page Analyzer：网站页面速度报告
Cacheability Test: 测试一个页面是否可Cache

参考资料：

阅微堂 » css

加速blog：关于javascript(css)

压缩你的javascript和css

合并javascript和css文件

javasctip和css文件位置

相关文章

用CSS Sprites让网站再加速

相关文章

Dreamhost上的GZIP & Cache

相关文章