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 学习点滴记录
Apr 24 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
node中的session的具体使用
Sep 14 Javascript
js不常见操作运算符总结
Nov 20 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中使用临时表查询数据的一个例子
2013/02/03 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
ajax异步请求详解
2017/01/06 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
讲解Python中fileno()方法的使用
2015/05/24 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python global全局变量函数详解
2018/09/18 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python基于Faker假数据构造库
2020/11/30 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
内业资料员岗位职责
2014/01/04 职场文书
节水口号标语
2014/06/19 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android