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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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之COOKIE支持详解
2010/09/20 PHP
php导出excel格式数据问题
2014/03/11 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
php如何获取Http请求
2020/04/30 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
python实现随机梯度下降(SGD)
2020/03/24 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python求质数的3种方法
2018/09/28 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
护理专科毕业推荐信
2013/11/10 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
调解协议书
2014/04/16 职场文书
小学领导班子对照材料
2014/08/23 职场文书
欠条格式范本
2015/07/03 职场文书
校运会新闻稿
2015/07/17 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
晶体管单管来复再生式收音机
2021/04/22 无线电
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技