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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
js+css在交互上的应用
2010/07/18 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
Python随机数random模块使用指南
2016/09/09 Python
python实现员工管理系统
2018/01/11 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Linux内核产生并发的原因
2016/11/08 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
创业资金计划书
2014/02/06 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
建筑安全责任书范本
2014/07/24 职场文书
小王子读书笔记
2015/06/29 职场文书