<!-- //WebUtil.getTagString(tags)%>-->
利用JS提高组合拼接字符串效率的方法
<!-- ����λ-->
希望跟各位高手交流,搞过web开发的朋友都知道,在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出。比如写脚本控件时控制整个控件的外观的HTML
标签输出,比如AJAX
里得到服务器端的回传值后动态分析创建HTML
标签时,不过这里我就不讨论拼接字符串的具体应用了,我只是想在这里讨论一下拼接的效率。
字符串的拼接在我们写代码
的时候都是用“+=”这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "";
for(var i=0; i<2000; i++) result += str;
就
这么一步操作,产生的结果字符串是200K,耗时是1.1秒(这个与电脑配置有关),CPU的峰值100%。(为了更直观地看到效果,我多做了些循环)。
可想而知就这么一步操作就消耗了我一秒多的时间,再加上其它的代码的时间消耗,那整个脚本块的执行时间就难以忍受了。那有没有优化的方案呢?还有其它的方
法吗?答案当然是有的,否则我写这篇文章就是废话。
更快的方式就是使用数组,在循环拼接的时候不是相接拼接到某个字符串里去,而是把字符串放到一个数组里,最后用数组.join("") 得到结果字符串,代码示例:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
大家可以测试测试,组合出一个相同大小的字符串所消耗的时间,我这里测试出来的结果是:<15毫秒,
请注意,它的单位是毫秒,也就是说组合出这么一个200K的字符串,两种模式的时间消耗是差不多两个数量级。这意味着什么?意味着后者已经工作结束吃完中
饭回来,前者还在做着苦力。我写一个测试页面,大家可以把下面这些代码拷贝下来另存为一个HTML文件在网页里打开自己来测试一下两者之间的效率差,反正
我测试的是前者要半分钟才能完成的事,后者0.07秒就搞定了(循环10000次)。
字符串拼接次数<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()"><br>
<div
id="method1"> </div
>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//这个被拼接的字符串长是100字节 author: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
方法一:
function method1()
{
var result = "";
var totle= parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
for(var i=0; i<totle; i++)
{
result += str;
}
document.getElementById("show").value = result;
var s = "字符串拼接法:拼接后的大字符串长 "+ result.length +"字节,"+
"拼接耗时 "+ (new Date().getTime()-n) +"毫秒!";
document.getElementById("method1").innerHTML = s;
方法二:
function method2()
{
var result = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
var a = new Array();
for(var i=0; i<TOTLE; i++)
{
a[i] = str;
}
result = a.join(""); a=null;
document.getElementById("show").value = result;
var s = "数组赋值join法:拼接后的大字符串长 "+ result.length +"字节,"+
"拼接耗时 "+ (new Date().getTime()-n) +"毫秒!";
document.getElementById("method2").innerHTML = s;
}
//-->
最后我再说几句,是不是以后字符串拼接就一律使用数组join呢?这个要看你的实际需
求了,就普通的几个或者K级的字节的组合就没有必要使用数组法了,因为开数组变量也是有
消耗的。若有几K以上的字符串组合,那就是数组的效率高了。
IE 6.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 22089毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 218毫秒!
Firefox 1.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
Mozilla 1.7:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 1045毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
Netscape 7.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 10273毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1138毫秒!
Opera 7.54:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 6968毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 6922毫秒!
循环10000次的测试结果表明在IE和Netscape里可以大大提高效率,而在Firefox Mozilla
Opera 里两种方法耗时基本相近,这些数据足可以判定数组join法优于传统字符串拼接。
分享到:
相关推荐
如何利用js拼接html字符串.docx
JavaScript 利用StringBuffer类提升+=拼接字符串效率,需要的朋友可以参考下。
js两种拼接字符串的简单方法(必看).docx
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg)){ //包含; } ...
主要介绍了JavaScript组合拼接字符串的效率对比测试,本文测试了IE6、Firefox、Mozilla、Netscape、Opera等浏览器,需要的朋友可以参考下
字符串排序方法 javaScript中的字符串排序。
本文实例讲述了javascript实现的字符串与十六进制表示字符串相互转换方法。分享给大家供大家参考。具体如下: 之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6...
主要介绍了JavaScript判断一个字符串是否包含指定子字符串的方法,实例分析了javascript字符串操作的技巧,非常具有实用价值,需要的朋友可以参考下
下面小编就为大家带来一篇js两种拼接字符串的简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要给大家总结介绍了关于Python拼接字符串的7种方法,分别是来自C语言的%方式、format()拼接方式、() 类似元组方式、面向对象模板拼接、join()拼接方式以及f-string方式,文中通过示例代码介绍的非常详细,需要的...
本文主要针对Javascript中字符串相关常用的使用方法进行了总结
在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了。 如果是在一行的,可读性差不说,如果要换行的,会直接报错。 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items...
JavaScript应用实例-字符串所有排列组合.js
本文实例讲述了js实现统计字符串中特定字符出现个数的方法。分享给大家供大家参考,具体如下: //js统计字符串中包含的特定字符个数 function getPlaceholderCount(strSource) { //统计字符串中包含{}或{xxXX}的...
本篇文章主要介绍了vue语法之拼接字符串的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
js截取字符串 substr() 方法能够根据指定长度来截取子字符串。它包含两个参数,第一个参数 表示准备截取的子字符串起始下标,第二个参数表示截取的长度。 示例 1 在下面示例中使用 lastIndexOf() 获取字符串的最后一...
用于js或者java后台截取字符串方法,有效
js字符串的处理函数、带实例 、
主要介绍了Javascript中拼接大量字符串的方法,本文实现的就是JS语言中的Heredoc语法,需要的朋友可以参考下