html数组字符串拼接的最快方法
作者:bea
第一种:逐个字符串相加 代码如下: 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>'; 这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第一种:逐个字符串相加
代码如下:
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 次需要的时间:
有用 | 无用
代码如下:
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 次需要的时间:
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Tab页界面,用jQuery及Ajax技术实现
- 一个js写的日历(代码部分网摘)
- js表格分页实现代码
- ext 同步和异步示例代码
- JQuery的ajax基础上的超强GridView展示
- jQuery slider Content(左右控制移动)
- 控制input的CSS但不影响CheckBox以及Radio的样式
- JavaScript switch case 的用法实例[范围]
- jQuery 事件队列调整方法
- javascript 面向对象编程 function是方法(函数)
- javascript 面向对象编程 聊聊对象的事
- javascript 面向对象编程 万物皆对象
- javascript 面向对象编程 function也是类
- 类似CSDN图片切换效果脚本
- var与Javascript变量隐式声明
- 颜色快速采集器javascript代码
- Javascript createElement和innerHTML增加页面元素的性能对比
- javascript 遮照层效果
- JavaScript 浮动定位提示效果实现代码