首先看测试代码:
<script type="text/javascript">
/* 生成100000长度的测试数组 */
var arr = [], list = '', re = [], list2 = '';
for(var i = 0; i < 100000; i++) {
arr[i] = 'item' + i;
}
/* 方法一 用普通字符串连接 */
var d = new Date().getTime();
for(var j = 0, len = arr.length; j < len; j++) {
list += '<li>' + arr[j] + '</li>';
}
list = '<ul>' + list + '</ul>';
d = new Date().getTime() - d;
document.write('普通字符串用时:' + d + 'ms<br/>');
/* 方法二 用数组push */
var d1 = new Date().getTime();
for(var i = 0, len = arr.length; i < len; i++) {
re.push('<li>' + arr[i] + '</li>');
}
re = '<ul>' + re.join('') + '</ul>';
d1 = new Date().getTime() - d1;
document.write('数组push用时:' + d1 + 'ms<br/>');
/* 方法三 用原生join */
var d2 = new Date().getTime();
list2 = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
d2 = new Date().getTime() - d2;
document.write('原生join用时:' + d2 + 'ms');
</script>
大致测试结果比率如下:
FF3.5:
普通字符串用时:131ms 数组push用时:122ms 原生join用时:53ms
IE8:
普通字符串用时:265ms 数组push用时:485ms 原生join用时:94ms
Chrome4:
普通字符串用时:39ms 数组push用时:133ms 原生join用时:63ms
Opera10:
普通字符串用时:266ms 数组push用时:375ms 原生join用时:125ms
Safari4:
普通字符串用时:54ms 数组push用时:74ms 原生join用时:23ms
首先可见大部分浏览器都对普通字符串操作做了优化,都优于数组push操作.但用原生的join占有绝对优势.