查看文章 |
Javascript性能优化[实例]
2007-07-30 12:59
最初的代码: 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代码的性能越来越显得重要。我想这就是一个很典型的例子,上面那段代码因为会被频繁使用,所以才有了此优化的过程。 |
最近读者: