html的一些优化

最近关注了下html的性能问题，css、图片、JS都可以得到不少的优化，先从JS说起，JS比较优秀的压缩工具很多，yuicompressor、shrinksafe等，但是个人觉得目前最好的还是google的Closure Compiler，这个工具功能很强，Closure Compiler是一个编译器（Compiler），也就是说GC的压缩并不仅仅是去除注释和空白，还可以在保证代码正确性的情况下进一步地改写成更省空间的做法。即便是一个JS依赖于另一个JS文件，也可以单独压缩。当然更支持将多个文件压缩成一个文件，用法也很简单：

引用

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

上面代码需要的环境是jdk6与closure compiler包。如果要压缩多个文件，只需要加在hello.js后面（用空格隔开）。压缩出来的效果也非常的不错，即使里面有中文字符也会将其转成unicode字符，功能真是太强了!closure compiler还带一个Inspector的插件，看样子也很强大，以后有空再去看看。
另外yuicompressor还可以对css进行压缩，不过好像只能对单个文件进行压缩，shrinksafe可以打包压缩css，不过须和dojo一起使用。

另外讲一下关于图片的问题，比如密码强度验证，假如验证有三个级别，那么每种级别会对应一种背景图片，而这些图片都是非常小的，但是每张图片还是得请求一次，这种会影响性能，最好是把这三张小图片合成一张，至于怎么合的我没去研究过，但是用ps之类的肯定是可以的。如下图：

在CSS中用法如下：

#pwd-strong { float:left; margin:0px; padding:0px; list-style:none; background-image:url(../../images/reg/pwdstrong.gif); background-repeat:no-repeat; }
#pwd-strong li { float:left; padding:0px; color:#ccc; font-size:11px; width:64px; height:10px; text-align:center; padding-top:9px; }
.pwds1 { background-position:-20px -18px; }
.pwds2 { background-position:-20px -44px; }
.pwds3 { background-position:-20px -70px; }

在这里还得说下backgroud-position的用法：
background-position:-20px -18px;表示图片向左移20px，向上移18px。如果为正数，则相反，向右下移动。
上面的每种背景的高度是固定的，为10px。