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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
javascript回到顶部特效
Jul 30 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 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+MySQL的聊天室设计
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
php adodb分页实现代码
2009/03/19 PHP
解析php中的escape函数
2013/06/29 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue实现tab栏点击高亮效果
2020/08/19 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python ZipFile模块详解
2013/11/01 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Django如何自定义分页
2018/09/25 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
村容村貌整治方案
2014/05/21 职场文书
中秋晚会活动方案
2014/08/31 职场文书
php去除deprecated的实例方法
2021/11/17 PHP