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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jquery实现页面加载效果
Feb 21 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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 图片验证码实现代码
2009/12/11 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP实现简易计算器功能
2020/08/28 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
javascript数组定义的几种方法
2017/10/06 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python3 简单实现组合设计模式
2020/07/02 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
主题团日活动总结
2014/06/25 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
大学生交通专业求职信
2014/09/01 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
广告业务员岗位职责
2015/02/13 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
个人收入证明范本
2015/06/12 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
SQL Server Agent 服务无法启动
2022/04/20 SQL Server