优化你的JS代码--字符串的拼接

最新推荐文章于 2024-07-20 18:19:31 发布

原创最新推荐文章于 2024-07-20 18:19:31 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#优化 #firefox #button #浏览器 #chrome #ie

web 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在JavaScript中提高字符串拼接性能的方法，通过比较直接使用+运算符与利用数组的join方法进行拼接的效果，揭示了在不同浏览器环境下两种方法的性能差异，并提供了一个实例来展示如何更高效地进行字符串拼接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

java提倡在处理字符串拼接的时候用StringBuffer，好处不多说了，这不是此文的本意，总之谁用谁知道。

但是js貌似没有这方面专门处理字符串的类或者函数阿，所以有很多程序员包括我在内，大篇幅加大手笔的采用str1 + str2+...的形式，很多时候外面还有for循环...

难道js中真没有能提高在字符串拼接方面的性能的办法了吗？答案是有的，见下文：

字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。

 <div class="one" id="one"></div>   
<input type="button" value="效率低" onclick="func1()" />   
<input type="button" value="效率高" onclick="func2()" />

 //效率低的   
function func1(){   
    var start = new Date().getTime();   
    var template = "";   
    for(var i = 0; i < 10000; i++){   
        template += "<input type='button' value='a'>";   
    }   
    var end = new Date().getTime();   
    document.getElementById("one").innerHTML = template;   
    alert("用时:" + (end - start) + "毫秒");   
}   
//效率高的   
function func2(){   
    var start = new Date().getTime();   
    var array = [];   
    for(var i = 0; i < 10000; i++){   
        array[i] = "<input type='button' value='a'>";   
    }   
    var end = new Date().getTime();   
    document.getElementById("one").innerHTML = array.join("");   
    alert("用时:" + (end - start) + "毫秒");   
}

我们看看其在不同浏览器下执行的情况

我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用数组的原生的方法push，其实直接用arr[i]或者arr[arr.length]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十几毫秒的差别。