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通过Ajax访问XML数据的小例子
Nov 18 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
JScript实现地址选择功能
Aug 15 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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基础之运算符的使用方法
2013/04/28 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript日历实现代码
2010/09/12 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
python版本的读写锁操作方法
2016/04/25 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
铭立家具面试题
2012/12/06 面试题
党员干部一句话承诺
2014/05/30 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
工作失职检讨书500字
2014/10/17 职场文书
学生保证书格式
2015/02/27 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS