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 内置对象属性及方法集合
Jul 04 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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多用户读写文件冲突的解决办法
2013/11/06 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
Django中Forms的使用代码解析
2018/02/10 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python版本的仿windows计划任务工具
2018/04/30 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python Shapely使用指南详解
2020/02/18 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
房产委托公证书样本
2014/04/04 职场文书
小学教师师德承诺书
2014/05/23 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
通知格式
2015/04/27 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
python pygame入门教程
2021/06/01 Python
浅谈python中的多态
2021/06/15 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python