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 相关文章推荐
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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中快速生成随机密码的几种方式
2017/04/17 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python实现中文输出的两种方法
2015/05/09 Python
python采集百度百科的方法
2015/06/05 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
一看就懂得Python的math模块
2018/10/21 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python利用platform模块获取系统信息
2020/10/09 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
总经理任命书
2014/03/29 职场文书
赡养老人协议书
2014/04/21 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
学生检讨书怎么写
2015/05/07 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript