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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 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 strtotime函数详解
2009/12/18 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP微信分享开发详解
2017/01/14 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
ReactRouter的实现方法
2021/01/25 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
django使用channels实现通信的示例
2020/10/19 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
财务副总经理工作职责
2013/11/25 职场文书
开学典礼主持词
2014/03/19 职场文书
市级三好学生评语
2014/12/29 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
监理中标通知书
2015/04/16 职场文书
公司搬迁通知
2015/04/20 职场文书
客户付款通知书
2015/04/23 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书