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一些实用技巧小结
Mar 18 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js选项卡的实现方法
2015/02/09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Python字符转换
2008/09/06 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python pandas库中的isnull()详解
2019/12/26 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
星空联盟C# .net笔试题
2014/12/05 面试题
科学发展观演讲稿
2014/09/11 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
音乐会主持人开场白
2015/05/28 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL