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 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
Bootstrap精简教程
Nov 27 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
js实现二级联动简单实例
Jan 11 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python小进度条显示代码
2019/03/05 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
班组长安全生产职责
2013/12/16 职场文书
六十大寿答谢词
2014/01/12 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
就业协议书怎么填
2014/04/11 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
环保建议书作文500字
2015/09/14 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python