html数组字符串拼接的最快方法


Posted in Javascript onSeptember 16, 2009

第一种:逐个字符串相加

var arr = ['item 1', 'item 2', 'item 3', ...], 
list = ''; 
for (var i = 0, l = arr.length; i < l; i++) { 
list += '<li>' + arr[i] + ''; 
} 
list = '<ul>' + list + '</ul>';

这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
var arr = ['item 1', 'item 2', 'item 3', ...], 
list = []; 
for (var i = 0, l = arr.length; i < l; i++) { 
list[list.length] = '<li>' + arr[i] + ''; 
} 
list = '<ul>' + list.join('') + '</ul>';

比上一种方法稍微快一些,但还是不够好…
第三种:直接join()
var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。
浏览器性能
每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:

html数组字符串拼接的最快方法

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JavaScript对象学习小结
Sep 02 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 #Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 #Javascript
不安全的常用的js写法
Sep 15 #Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 #Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 #Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 #Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 #Javascript
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JS重载实现方法分析
2016/12/16 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
捐书活动总结
2014/05/04 职场文书
贷款担保书范文
2014/05/13 职场文书
宣传标语大全
2014/07/01 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle