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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js中文逗号转英文实现
Feb 11 Javascript
angular directive的简单使用总结
May 24 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
Vue.js组件props数据验证实现详解
Oct 19 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php实现映射操作实例详解
2019/10/02 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python实现二叉堆
2016/02/03 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python numpy实现rolling滚动案例
2020/06/08 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
运动会入场词60字
2014/02/15 职场文书
学生期末评语大全
2014/04/30 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
停课通知书
2015/04/24 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技