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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
node后端服务保活的实现
Nov 10 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
在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函数in_array()使用详解
2014/08/20 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python 三元运算符使用解析
2019/09/16 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
int和Integer有什么区别
2013/05/25 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
老同学聚会感言
2014/02/23 职场文书
科学发展观标语
2014/10/08 职场文书
一年级小学生评语大全
2014/12/25 职场文书
优秀团队申报材料
2014/12/26 职场文书
工作表扬信
2015/01/17 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python