JS下高效拼装字符串的几种方法比较与测试代码
更新时间：2010年04月15日 00:02:49 作者：
本文介绍一下js如何高效来拼装字符串的方法，希望大家看了以后多用效率高的代码，不要让客户端浏览器执行的太慢，提高用户体验。
在使用Ajax提交信息时，我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交。尽管提交这样大的信息的做法看起来并不优雅，但有时我们可能不得不面对这样的需求。那么JavaScript中对字符串的累加速度如何呢？我们先来做下面的这个实验。累加一个长度为30000的字符串。
测试代码1 - 耗时: 14.325秒
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
这段代码耗时14.325秒，结果并不理想。现在我们将代码改为如下的形式：
测试代码2 - 耗时: 0.359秒
var str = "";
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
str += sub;
}
这段代码耗时0.359秒！同样的结果，我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。
测试代码3 - 耗时: 0.140秒
var strArray = new Array();
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
strArray.push(sub);
}
str = String.prototype.concat.apply("", strArray);
不过，上面这种做法也许并不是最好的！如果我们需要提交的信息是XML格式的（其实绝大多数情况下，我们都可以设法将要提交的信息组装成XML格式），我们还能找能更高效更优雅的方法—利用DOM对象为我们组装字符串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。
利用DOM对象组装信息 - 耗时: 0.890秒
var xmlDoc;
if (browserType == BROWSER_IE) {
xmlDoc = new ActiveXObject("Msxml.DOMDocument");
}
else {
xmlDoc = document.createElement("DOM");
}
var root = xmlDoc.createElement("root");
for (var i = 0; i < 50000; i++) {
var node = xmlDoc.createElement("data");
if (browserType == BROWSER_IE) {
node.text = "xxxxxx";
}
else {
node.innerText = "xxxxxx";
}
root.appendChild(node);
}
xmlDoc.appendChild(root);
var str;
if (browserType == BROWSER_IE) {
str = xmlDoc.xml;
}
else {
str = xmlDoc.innerHTML;
}
测试代码1 - 耗时: 14.325秒
复制代码 代码如下:
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
这段代码耗时14.325秒，结果并不理想。现在我们将代码改为如下的形式：
测试代码2 - 耗时: 0.359秒
复制代码 代码如下:
var str = "";
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
str += sub;
}
这段代码耗时0.359秒！同样的结果，我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。
测试代码3 - 耗时: 0.140秒
复制代码 代码如下:
var strArray = new Array();
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
strArray.push(sub);
}
str = String.prototype.concat.apply("", strArray);
不过，上面这种做法也许并不是最好的！如果我们需要提交的信息是XML格式的（其实绝大多数情况下，我们都可以设法将要提交的信息组装成XML格式），我们还能找能更高效更优雅的方法—利用DOM对象为我们组装字符串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。
利用DOM对象组装信息 - 耗时: 0.890秒
复制代码 代码如下:
var xmlDoc;
if (browserType == BROWSER_IE) {
xmlDoc = new ActiveXObject("Msxml.DOMDocument");
}
else {
xmlDoc = document.createElement("DOM");
}
var root = xmlDoc.createElement("root");
for (var i = 0; i < 50000; i++) {
var node = xmlDoc.createElement("data");
if (browserType == BROWSER_IE) {
node.text = "xxxxxx";
}
else {
node.innerText = "xxxxxx";
}
root.appendChild(node);
}
xmlDoc.appendChild(root);
var str;
if (browserType == BROWSER_IE) {
str = xmlDoc.xml;
}
else {
str = xmlDoc.innerHTML;
}
相关文章
这篇文章主要介绍了24个ES6方法解决JS实际开发问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了JS实现的点击按钮图片上下滚动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
单页Web应用 （single page web application，SPA） ，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。本文将利用原生JS实现SPA单页应用，需要的可以参考一下2023-03-03
这篇文章主要介绍了gulp构建小程序的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
ES6基础之解构赋值(destructuring assignment)
这篇文章主要介绍了ES6基础之解构赋值(destructuring assignment)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了JS/CSS实现字符串单词首字母大写功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
数组 重复采用的是Object的 in 操作符，体现一把它的强大（有更好的办法来实现这个功能，但是这里只是演示 in 操作符）！2008-03-03
这篇文章主要介绍了javascript实现表格排序 编辑 拖拽 缩放的方法，效果非常不错，只是兼容性还有些问题，有待优化。2015-01-01
这篇文章主要给大家介绍了关于如何利用JavaScript为句子加标题的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了js fill函数填充数组或对象的问题及解决方法，本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论