javascript中拼接HTML字符串的最快、最好的方法


Posted in Javascript onJune 07, 2014

第一种:逐个字符串相加

var arr = ['item 1', 'item 2', 'item 3', ...];
list = '';
for (var i = 0,
l = arr.length; i < l; i++) {
    list += '' + arr[i] + '';
}
list = '' + list + '';

这种最常见的,但是效率最低!代码逻辑相对来说复杂。

第二种:逐个 push 进数组

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0,
l = arr.length; i < l; i++) {
    list[list.length] = '' + arr[i] + '';
}
list = '' + list.join('') + '';

比上一种方法稍微快一些,但还是不够好…

第三种:直接join()

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '' + arr.join('') + '';

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

浏览器性能测试

每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:
javascript中拼接HTML字符串的最快、最好的方法

Javascript 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 #Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 #Javascript
jQuery的缓存机制浅析
Jun 07 #Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 #Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 #Javascript
判断iframe里的页面是否加载完成
Jun 06 #Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 #Javascript
You might like
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python中如何写类
2020/06/29 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
益达广告词
2014/03/14 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
国家助学金感谢信
2015/01/21 职场文书
护士工作心得体会
2016/01/25 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书