Javascript性能优化[实例]

最初的代码：
var s = [x1,x2,.....];
var t = [y1,y2,.....].
//s和t的长度对应，大约2700个元素。
function String.prototype.s2c(){
var k='';
for(var i=0;i<this.length;i++)
k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i)))
return k;
}
//这段代码为：把String中在s数组出现的字符用t中相应位置的字符替换。这种方法可以用在繁简转换上。String的长度不小，一般为一篇 blog文章的长度。

第一次优化：把k变成数组，因为字符串相加没有Array.join的内存效率好。
function String.prototype.s2c(){
var k=[];
for(var i=0;i<this.length;i++)
k.push((s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i))));
return k.join('');
}
效率提高不少。

第二次优化：减少循环内的运算次数。
function String.prototype.s2c(){
var k=[];
for(var i=0;i<this.length;i++) {
var thisC = this.charAt(i);
k.push((s.indexOf(thisC)==-1)?thisC:t.charAt(s.indexOf(thisC)));
}
return k.join('');
}
这一次把三次this.charAt(i)调用变成了一次调用，效率也有所提高。

第三次优化：把数组的indexOf改成HashMap查找方式，修改循环里面的this.length
先创建HashMap：
var sMap = {},tMap={};
for(var i=0;i<s.length;i++) {
var sChar = s.charAt(i);
var tChar = t.charAt(i);
sMap[sChar ] = tChar;
tMap[tChar] = sChar;
}
然后修改代码：
function String.prototype.s2c(){
var k=[];
var len = this.length;
for(var i=0;i<len;i++) {
var thisC = this.charAt(i);
k[i] = sMap[thisC] || thisC;
}
return k.join('');
}
这一次改进性能也会有比较好的提升。

最后一次优化：改进数组访问的性能。
把原字符串split成数组，然后在一个数组上操作。

function String.prototype.s2c(){
var len = this.length;
var k=this.split('');
for(var i=0;i<len;i++) {
var thisC = this[i];
var to = sMap(thisC);
to?k[i]=to:''; //这里有一个小技巧，这个技巧导致当sMap里没有thisC的映射时下面可以少一次赋值运算
}
return k.join('');
}
经过这一步的优化，性能提升相当明显，我做的测试是，s/t的长度为2700个字符，而每个字符串的长度为1300字符，每100次操作优化前花3.5s 左右，而优化后花700ms左右。整个优化最关键的地方是提升循环内的效率，因为一点效率的损失会被频繁使用的循环放大到成百上千倍。

随着Ajax越来越普遍，Ajax引用的规模越来越大，Javascript代码的性能越来越显得重要。我想这就是一个很典型的例子，上面那段代码因为会被频繁使用，所以才有了此优化的过