性能，还是性能！
5条评论»
很简单的一个应用，实现方式当然也是多种多样，最直接的，通过<img>的src属性，但我想这是最废材的方法了，这样一个效果，你至少需要两张图片，然后是更多的DOM操作，你还要面对图片下载延迟的问题。还有啥性能（1，2）可言？
于是我写了以下的实现方式（DEMO）：
function star(id){
var star = $(id);
var stars = $(id).getElementsByTagName("li");
for(var i=0; i<stars.length; i++){
stars[i].starNum = i+1;
stars[i].onmouseover = function(){
star.star = this.starNum;
star.style.backgroundPosition = 'left '+(-parseInt(this.starNum)*30)+'px';
}
stars[i].onclick = function(){
alert(star.star);
}
}
star.onmouseout = function(){
star.star = 0;
this.style.backgroundPosition = 'left top';
}
}
function $(id){return document.getElementById(id);}
当然要依据特定的DOM，这种方式通过改变背景图片的位置来实现，看起来似乎已经很完美了，可惜这只是较之于src的实现方法而言。
再看一个TZ的改进的版本（DEMO）：
function $(element){
return document.getElementById(element) ;
}
var obj = $('outter').getElementsByTagName("li") ;
for (var i=0,k;k=obj[i];i++ ) {
k.no = i ;
k.onmouseover = function () {
for (var i=0;i<=this.no;i++ ) {
obj[i].style.backgroundPosition = 'left -30px' ;
}
}
k.onmouseout = function () {
for (var i=0;i<=this.no;i++ ) {
obj[i].style.backgroundPosition = 'left top' ;
}
}
}
很显然，这个写法比我的又更优化了一些。虽然都是通过改变背景图片的坐标来实现，但是，我使用了一个30K的jpg图片，TZ使用的却是一个只有599B的gif图片，但即使不使用gif，他的图片也会比我的小很多，大概是15倍左右～···，因为具体的实现方式决定了。虽然他的方法增加了更多的DOM操作，但是最大限度地优化网络传输方面的性能，总体性能是最佳的！
只有一个感概：只要有可能，就要最大限度的减少页面下载量，就要最大限度的提升代码性能！
