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 相关文章推荐
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
javascript 用函数实现继承详解
May 28 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
轮播的简单实现方法
Jul 28 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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/04/19 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
节约粮食标语
2014/06/18 职场文书
公益广告标语
2014/06/19 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
建国大业电影观后感
2015/06/01 职场文书
消夏晚会主持词
2015/06/30 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
python中的random模块和相关函数详解
2022/04/22 Python