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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php中require和require_once的区别说明
2014/02/27 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python常用类型转换实现代码实例
2020/07/28 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
医院总经理岗位职责
2014/02/04 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
小学生植树节活动总结
2014/07/04 职场文书
六查六看剖析材料
2014/10/06 职场文书
出差报告怎么写
2014/11/06 职场文书
订货会主持词
2015/07/01 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android