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中令你抓狂的魔术变量
Nov 30 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue配置多页面的实现方法
May 22 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
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获取地址栏信息的代码
2008/10/08 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python代码制作configure文件示例
2014/07/28 Python
python版本的读写锁操作方法
2016/04/25 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
法学专业应届生求职信
2013/10/16 职场文书
高考寄语大全
2014/04/08 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年工会工作总结
2014/11/12 职场文书
幼师个人总结范文
2015/02/28 职场文书
超级礼物观后感
2015/06/15 职场文书
小学语文国培研修日志
2015/11/13 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
golang判断key是否在map中的代码
2021/04/24 Golang
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS