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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
javascript object array方法使用详解
Dec 03 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jquery队列函数用法实例
Dec 16 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 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
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
Symfony控制层深入详解
2016/03/17 PHP
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python中实现的RC4算法
2015/02/14 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
写给老婆的检讨书
2014/02/21 职场文书
安踏广告词改编版
2014/03/21 职场文书
工作求职自荐信
2014/06/13 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
css3应用示例:新增的选择器
2022/03/16 HTML / CSS