探讨js字符串数组拼接的性能问题_javascript技巧

我们知道,在js中,字符串连接是性能最低的操作之一。
例如:

复制代码 代码如下:

var text="Hello"; 
text+=" World!"; 

早期浏览器没有对这种运算进行优化。
由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。

因此,可以利用数组对象进行优化。
例如:

var buffer=[],i=0;
buffer[i++]="Hello";  //通过相应索引值添加元素比push方法快
buffer[i++]=" World!";
var text=buffer.join("");

在早期的浏览器中,没有创建和销毁中间字符串,在大量字符串连接情况下,这技术已被证明远快于使用加法方式。
 
如今浏览器对字符串的优化已经改变了字符串相连的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更好的性能。但是,IE8之前的版本没有优化,因此数组方法依然有效。这并不意味着字符串相连时我们要进行浏览器检测。在决定如何连接时要考虑的是字符串的大小和数量。

当字符串相对较小(小于20字符)且连接数量也较小时(小于1000个),所有的浏览器使用加法运算符都能在不到1毫秒内轻松完成连接。增加字符串数量或大小时,IE7中性能会明显下降。字符串大小增加时,Firefox中加法运算符和数组成技巧性能差异会变小。字符串数量增加时,Safari中加法运算符和数组成技巧性能差异会变小。改变字符串数量或大小时,Chrome和Opera中加法运算符一直保持领先优势。

所以,由于在各浏览器下性能不一致,选用技术取决于实际情况和面对的浏览器。

大多数情况下,加法运算符是首选;如果用户主要使用IE6或7,并且字符串大小较大或数量较多时,那么数组技术就很值得。
 
一般情况下,如果是语义性的字符串,不应该使用Array,比如:
'Hello, my name is ' + name; 
 
如果字符串是"相似情况的重复"的话,建议使用Array,比如:

var array = [];
for (i = 0; i < length; i++) {
array[i] = '<li>' + list[i] + '</li'>;
}
document.getElementById('somewhere').innerHTML = array.join('\n');

有关js字符串数组连接的性能比较,就介绍到这里了,希望对大家有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数组
, 字符串
, 性能
拼接
javascript字符串拼接、javascript 数组拼接、ios数组拼接成字符串、php数组拼接成字符串、js拼接json字符串数组,以便于您获取更多的相关知识。

时间: 2024-12-31 06:21:48

探讨js字符串数组拼接的性能问题_javascript技巧的相关文章

js字符串操作总结(必看篇)_javascript技巧

字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一个参数,基于0的

js采用concat和sort将N个数组拼接起来的方法_javascript技巧

本文实例分析了js采用concat和sort将N个数组拼接起来的方法.分享给大家供大家参考,具体如下: 这是某个大型企业的面试题扩展得来的,只是一种解法,但是无法确定是否高效,不过效果确实是实现了! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

JS删除数组元素的函数介绍_javascript技巧

split将字符串转为数组并输出的代码: 复制代码 代码如下: <script language="javascript">    function spli(){             datastr="2,2,3,5,6,6";         var str= new Array();     str=datastr.split(",");           for (i=0;i<str.length ;i++ )  

原生js的数组除重复简单实例_javascript技巧

js对数组的操作在平常的项目中也会遇到,除去一些增加,或者减少的操作外,还有一个比较重要的操作就是数组的除重,通过数组的除重,我们可以将一个数组中存在的多个重复的数组进行清理,只留下不重复的.另外下面我介绍一种原生就s的数组除重方法. Array.prototype.check= function(){ for(var i=0;i<this.length;i++){ for(var j=i+1;j<this.length;j++){ if(this[i]==this[j]){ this.spl

js 字符串转化成数字的代码_javascript技巧

方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: parseInt("1234blue"); //returns 1234 parseInt("0xA"); //returns 10 par

js实现数组冒泡排序、快速排序原理_javascript技巧

本文为大家分享了js数组冒泡排序.快速排序的实现原理,供大家参考,具体内容如下 1.冒泡排序: 随便从数组中拿一位数和后一位比较,如果是想从小到大排序,那么就把小的那一位放到前面,大的放在后面,简单来说就是交换它们的位置,如此反复的交换位置就可以得到排序的效果. var arr = [3,1,4,2,5,21,6,15,63]; function sortA(arr){ for(var i=0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j+

javascript 三种数组复制方法的性能对比_javascript技巧

我们以一个拥有500000个子项的数组, 作为测试对象(IE不会崩溃哦!). copyBySlice copyByConcat copyByLoop

js过滤数组重复元素的方法_javascript技巧

复制代码 代码如下: function filterArray(str,array){ //此函数为过滤数组中重复的元素,并不允许插入空值,函数返回数组 var isnull = false; if(str == "" || str == null || str == 'undefined'){ isnull = true; } var newnum = 0; var newarray = []; var num = array.length; if(num == 0){ if(!is

js 处理数组重复元素示例代码_javascript技巧

复制代码 代码如下: function doSz{ var kzly==["a","a","c","a","b"]; for(var i=0;i<kzly.length;i++){ var targetNode = kzly[i]; for (var j=0; j<i; j++) { if(targetNode == kzly[j]){ kzly.splice(i,1); kzlymc.spli