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插件制作教程 txtHover
Aug 17 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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中mt_rand()随机数函数用法
2014/11/24 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
小班秋游活动方案
2014/02/22 职场文书
领导调研接待方案
2014/02/27 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
绿色小区申报材料
2014/08/22 职场文书
中职招生先进个人材料
2014/08/31 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
学生会任命书范本
2015/09/21 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers