【优化】字符串拼接

首先看测试代码:

 

<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占有绝对优势.