再论Javascript下字符串连接的性能_javascript技巧

1 如何进行字符串连接?

首先让我们来回顾一下字符串连接的两种常用方法:
1.1 使用字符串连接运算符

常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:

复制代码 代码如下:

var str = "";
str = str + "a";

1.2 使用数组

在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。

复制代码 代码如下:

var str = [];
for (var i = 0; i < 100; i++) {
  str[i] = "12345";
}
str = str.join("");

2 测试

下面通过复制字符串的过程来测试两种方法的性能:
2.1 通过字符串连接运算符进行复制:

复制代码 代码如下:

function copyByOperator(str, times) {
  var newStr = "";
  for (var i = 0; i < times; i++) {
    newStr += str;
  }
  return newStr;
}

2.2 通过数组进行复制:

复制代码 代码如下:

function copyByArray(str, times) {
  var newStr = [];
  for (var i = 0; i < times; i++) {
    newStr[i] = str;
  }
  return newStr.join("");
}

str采用一段固定的HTML字符串,长度是61。
2.3 IE下的测试

考虑到IE的性能比较差,先用小的times值(6000)在IE 6、IE 7和IE 8下面测试。运行10次后取平均值,结果如下:

浏览器 copyByOperator copyByArray
IE 6 1780.4ms 9.5ms
IE 7 1754.6ms 7.7ms
IE 8 1.6ms 9.4ms

IE6、7与IE8的测试结果相距甚远,很明显地,IE 8对字符串连接运算进行了优化,效率已经高于数组复制法

2.4 各种浏览器下的测试

下面再用比较大的times值(50000)对最新版本的各种浏览器进行测试。

浏览器 copyByOperator copyByArray
IE 8 21.8ms 54.7ms
Firefox 3.6 40.9ms 27.9ms
Chrome 4 4.4ms 10.9ms
Safari 4.0.5 41.6ms 34.6ms
Opera 10.50 33.1ms 23ms

这个结果真是出人意料。IE 8下的字符串连接运算竟然把Chrome以外的浏览器都打败了,那些老说IE性能低下的可要注意点了。而在Chrome下也出现了字符串连接运算比数组复制法高效的情况。

3 总结

浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。

时间: 2024-12-09 21:04:19

再论Javascript下字符串连接的性能_javascript技巧的相关文章

你必须知道的JavaScript 中字符串连接的性能的一些问题_基础知识

而JavaScript的核心是ECMAScript .与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变. 请考虑下面的代码: 复制代码 代码如下: var str = "hello ";str += "world";实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串.2.创建存储 "world" 的字符串.3.创建存储连接结果的字符串.4.把 str 的当前内容复制到结

javascript中字符串拼接详解_javascript技巧

最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script";  实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符

javascript实现字符串反转的方法_javascript技巧

本文实例讲述了javascript实现字符串反转的方法.分享给大家供大家参考.具体实现方法如下: //变量交换 方法 var a=0,b=1,c=2; a=[b,b=c,c=a][0]; //正文 var array='abcdefgh'; function Reverse(arr){ var arr1=arr.split('');//[a,b,c,d,e,f,g] var halfLen=Math.floor(arr.length/2);//3 alert(halfLen) var len=a

javascript查询字符串参数的方法_javascript技巧

本文实例讲述了javascript查询字符串参数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /* 解析查询字符串 返回包含所有参数的一个对象 */    function getQueryStringArgs(){       //取得查询字符串并去掉开头的问号     var qs = (location.search.length > 0 ? location.search.substring(1) : '');       //保存数据的对象     args

javascript下高性能字符串连接StringBuffer类_javascript技巧

复制代码 代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理

JavaScript 一道字符串分解的题目_javascript技巧

去某公司(公司名不说了,人这套题说不定还要用)面试,现场30分钟做了一套题,其中有一道是这样的: 要求用js写一个函数,对传入的形如下网址字符串,返回对应的对象. 如: 若传入字符串a='?name=zhiyelee&blog=www.tsnrose.com'; 则返回 b={'name':'zhiyelee','blog':'www.tsnrose.com'} 当时由于时间比较短,实现的有些问题,回来后想了一下,总结如下: 我想到了两种思路,一种是使用正则表达式,第二种是使用字符串的split

javascript下string.format函数补充_javascript技巧

又重新阅读了一遍Andrew的原文,在原文下面的评论中,赫然发现也有人早提出参数个数的问题,同样懒惰的楼猪直接拷贝原文评论答复了一下,同时还发现说漏了很重要的一个注意点Array.prototype.slice.下面统一补充说明一下: 1.string.format的参数个数 在Andrew的原文中,已经有人指出: eric d. Hi, thanks for that brilliant article. Made a lot of things a lot clearer! Note: ne

javascript for循环设法提高性能_javascript技巧

一般在javascript里对数组进行遍历一般是使用for循环,像下面一样 复制代码 代码如下: var arr = []; for(var i=0; i<arr.length; i++){ //loop } 这种代码最大的问题,就在于每次循环时都要通过 .操作符获取 .length,增加了开销.那么我们可以这样改进. 复制代码 代码如下: var arr = []; for(var i=0, n=arr.length; i<n; i++){ //loop } 这样子,先把 arr.lengt

javascript下function声明一些小结_javascript技巧

function test(){ return 123; } 显然这是一个函数声明,那下面的呢 var b=function(){return 123}; 这个大家就怀疑了,好似不是声明,因为函数没有名字,只是一个匿名函数,好,再看 var b=function test(){return 123}; 这个到底是不是函数声明呢,好象是,那我回答你"不是" alert(test); var b=function test(){return 123}; 可以在非ie上面任何一个js实现去测