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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
js+css3制作时钟特效
Oct 16 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
php zip文件解压类代码
2009/12/02 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
搭建vue开发环境
2018/07/19 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python url 参数修改方法
2018/12/26 Python
python分布式编程实现过程解析
2019/11/08 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
《猫》教学反思
2014/02/26 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
Golang数据类型和相互转换
2022/04/12 Golang