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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
video.js使用改变ui过程
Mar 05 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
在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合并两个数组的两种方式的异同
2012/09/14 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
pandas数据处理进阶详解
2019/10/11 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
2014年卫生监督工作总结
2014/12/09 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
广播体操比赛主持词
2015/06/29 职场文书
车间安全生产管理制度
2015/08/06 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Python字典的基础操作
2021/11/01 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript