JS压缩合并+gzip缓存,网页飞一般的感觉~~

昨天被疯淫鄙视了一通,是关于网站打开速度和YSLOW评分的.

疯淫 14:30:53
Grade B
Overall performance score 81 Ruleset applied: Classic(V1) URL: http://fengyin.name/
yslow给我评级是B
疯淫 14:31:06
看看你的
Grade E
Overall performance score 56 Ruleset applied: Classic(V1) URL: http://www.nbyang.com/
疯淫 14:31:28
EEEE 竟然是 E
悲剧了你 可怜的娃娃呀 看看你网站吧



看了一下,我的博客调用的JS文件有8个(一个统计代码)....

于是暂时放下<<间客>>,开始合并和压缩我的JS文件们,试了一些工具,但是合并出来老出错,压缩后的common.js也会出错,导致无法正常评论文章!(在线压缩合并:http://yui.2clics.net/ )

看来这些压缩工具的算法不太适合我的JS们啊! 没办法只好自己动手了,先去http://compress.iamzz.com/ (PS:不支持中文,中文去http://js.clicki.cc/ )删掉注释和空行(不要混淆,混淆必死,没有注释最好直接用UE或者EditPlus直接合并行),压缩后的文件按照加载顺序放在同一个JS文件中(每个JS之间最好加回车方便以后修改),然后修改调用地址.

我现在使用的JS文件:/images/js/nbyang.js 是把bo-blog的common.js/jslang.js/ajax.js/swfobject.js,还有我首页滑动特效的prototype.lite.js/moo.fx.js/moo.fx.pack.js全部压缩到了一起后的文件.

然后又把css也压缩了一次,速度提升了不少,大约需要5秒左右.
但还不是非常满意,于是又根据cbm的办法添加了CSS和JS的缓存,现在使用webwait测试的打开速度为1.6秒左右.

法克他娘亲的CSS高度自适应.

今天在修改一个网站的CSS,是想要分为左右两列,宽度不同,背景色不同.
结果就是ie7、firefox...这些浏览器无一例外的现实的效果都是长短不齐()IE6娘除外),如何让这两列可以自适应高度呢?

调试了半天,google了半天.找到许多解决办法,
采用Div+CSS进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,
要使两列或三列的高度相同,用Table很容易实现,但采用 Div+CSS就显得比较麻烦了.
按照一般的做法,大都采用背景图填充或JS脚本的方法使高度相同,或者直接清除子容器的float属性.

但是上面这些办法我挨个试了又试,完全不管用..皇天不负有心人,终于让我找到了所有浏览器兼用的解决办法.

主要代码如下:

{overflow:hidden;}
{padding-bottom:100000px;margin-bottom:-100000px;}



用法:

#main{overflow:hidden;}
#main_left,#main_right{padding-bottom:100000px;margin-bottom:-100000px;}



父容器为body时一样.