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 相关文章推荐
Fixie.js 自动填充内容的插件
Jun 28 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 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 array_search() 函数使用
2010/04/13 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python获取整个网页源码的方法
2020/08/03 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
物流创业计划书
2014/02/01 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
环保建议书200字
2014/05/14 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
教务处干事工作总结
2015/08/14 职场文书
无故旷工检讨书
2015/08/15 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Python学习之时间包使用教程详解
2022/03/21 Python