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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
在vue中使用防抖函数组件操作
Jul 26 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
帅气的琦玉老师
2020/03/02 日漫
php 数学运算验证码实现代码
2009/10/11 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python实现把数字转换成中文
2015/06/29 Python
Python可变参数函数用法实例
2015/07/07 Python
python下10个简单实例代码
2017/11/15 Python
Python工厂函数用法实例分析
2018/05/14 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
使用Django实现商城验证码模块的方法
2021/06/01 Python