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 相关文章推荐
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
JavaScript实现Tab选项卡切换
Feb 13 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python多重继承新算法C3介绍
2014/09/28 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
运动会获奖感言
2014/02/11 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
教学质量评估实施方案
2014/03/17 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
大连导游词
2015/02/12 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript