JS字符串连接性能：加法与数组方法的浏览器差异

字符串连接的两种基本方式

var text="Hello";

text+=" World!";

在早期浏览器版本中，此类字符串拼接运算并未得到底层优化。

鉴于字符串在JavaScript中是不可变对象，执行拼接操作时必须创建新的中间字符串来存储结果。这种频繁在后台创建和销毁字符串对象的机制，导致整体性能表现异常低下。

数组优化方法的原理与早期优势

var buffer=[],i=0;

buffer[i++]="Hello";//通过相应索引值添加元素比push方法快

buffer[i++]=" World!";

var text=buffer.join("");

在早期浏览器环境中，由于避免了中间字符串的创建与销毁开销，该技术在处理大量字符串连接时，已被证实性能远优于使用加法运算符的方式。

现代浏览器的性能反转与选型建议

然而，Safari、Opera、Chrome、Firefox以及IE8等现代浏览器在加法运算符上已展现出更优的性能。不过，IE8之前的旧版浏览器仍未进行相关优化，因此数组方法在这些环境中依然有效。

这并不意味着在字符串连接时需要进行浏览器检测。在决定采用何种连接策略时，核心考量因素应是字符串的大小及其数量。

1）当字符串相对较小（<20字符）且连接数量也较小时(<1000个），所有主流浏览器使用加法运算符都能在不到1豪秒内轻松完成连接。

2）随着字符串数量或大小的增加，IE7中的性能会出现明显下降。

3）当字符串大小增加时，Firefox中加法运算符和数组技巧的性能差异会变小。

4）当字符串数量增加时，Safari中加法运算符和数组技巧的性能差异会变小。

5）无论字符串数量或大小如何变化，Chrome和Opera中加法运算符一直保持着领先优势。

因此，由于各浏览器下的性能表现不一致，技术选型应取决于实际情况及目标浏览器环境。

在大多数情况下，加法运算符是首选方案；但如果用户主要使用IE6或IE7，且涉及的字符串较大或数量较多，那么数组拼接技术则更具价值。