JS下高效拼装字符串的几种方法比较与测试代码


Posted in Javascript onApril 15, 2010

在使用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; 
}
Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
js实现微信聊天效果
Aug 09 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 #Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 #Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 #Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 #Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 #Javascript
JavaScript中的prototype使用说明
Apr 13 #Javascript
Js 刷新框架页的代码
Apr 13 #Javascript
You might like
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php购物车实现方法
2015/01/03 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解Angular2组件之间如何通信
2017/06/22 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python基本语法经典教程
2016/03/11 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
留学推荐信怎么写
2014/01/25 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
农村党员干部承诺书
2015/05/04 职场文书
在校生证明
2015/06/17 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL