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的21条基本知识点
Mar 04 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
浅谈Vue数据响应
Nov 05 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
javascript 数组精简技巧小结
Feb 26 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python 自动补全(vim)
2014/11/30 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
params有什么用
2016/03/01 面试题
会议主持词
2014/03/17 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
社区平安建设方案
2014/05/25 职场文书
项目经理任命书内容
2014/06/06 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2015年信访工作总结
2015/04/07 职场文书
护理培训心得体会
2016/01/22 职场文书