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对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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的ZipArchive类用法实例
2014/10/20 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
Python日志模块logging简介
2015/04/13 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python获取Linux发行版名称
2019/08/30 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python序列类型种类详解
2020/02/26 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
心得体会开头
2014/01/01 职场文书
高中生期末评语
2014/01/28 职场文书
公务员保密承诺书
2014/03/27 职场文书
大学生工作自荐书
2014/06/16 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
居委会工作总结2015
2015/05/18 职场文书
2019销售早会主持词
2019/06/27 职场文书
React配置子路由的实现
2021/06/03 Javascript
Nginx 匹配方式
2022/05/15 Servers