再谈“字符串拼接”的效率

作者：yemoo 来源：yemoo博客时间：2009-04-30 12:48:00　

有关JS中字符串的相关文章，现在网上大概不计其数了。这里我不想再就这个问题做过多的论述，只是对几种方式的实现在各种浏览器中的执行效率进行对比做个总结。

拼接字符串，大体分为两种方式，一种通过+号拼接（方式1），这种方式在IE6中效率是极其低下的，因此就出现了第二种方式：采用数组保存，最后通过join拼接，这种方式的效率在IE6下对比会发现速度差异非常大。此外还有很多朋友估计没有注意过，数组拼接的方式又分为两种，一种是通过push将字符串放入数组（方式2），另外一种是通过arr[arr.length]='string'的方式存入（方式3），这两种方式的性能也是有一些差异的。这样，我们发现一共是有三种不同的方式的，下面我对这三种方式在不同浏览器下的执行效率做了个对比，具体数据就不贴出来（因为每次的数据都是不同的，但执行速度的排名是比较稳定的），只对他们的执行效率做个排名。

===========================================

浏览器方式1 方式2 方式3 引擎google 3 2 1 AppleWebKit/525.19safari 3 2 1 AppleWebKit/528.16opera 1 3 2 Presto/2.1.1ff3 1 3 2 Gecko/2009042316ff2 1 3 2 Gecko/20081201IE8 1 3 2 Trident/4.0IE7 3 2 1 未知IE6 3 2 1 未知=============================================

对比可做以下简单总结：

在FF及IE8中直接用+号拼接的方式还是效率的最高的方式，其它情况下该方式是最慢的。
数组拼接的方式里arr[arr.length]=''的方式是快于push方式的。
在进行字符串拼接的时间：1要判断浏览器类型，如果是+号拼接方式快则采用+号方式直接拼接，如果是数组方式，则采用arr[arr.length]=''的方式将字符串存入数组然后再采用join的方式拼接。

最后附上测试用到得代码（注：为准确测试，在不同浏览器要修改循环次数数值）

<html> <head> <title>Listing 1-2</title> <script> function badTest() { var startTime = new Date().valueOf(); var s = ""; for (var i = 0; i < 100000; i++) { s += "This is a test string"; } return new Date().valueOf() - startTime; } function goodTest() { var startTime = new Date().valueOf(); var stringBuffer = new Array(); for (var i = 0; i < 100000; i++) { stringBuffer.push("This is a test string"); } var s = stringBuffer.join(""); return new Date().valueOf() - startTime; } function betterTest() { var startTime = new Date().valueOf(); var stringBuffer = new Array(); for (var i = 0; i < 100000; i++) { stringBuffer[stringBuffer.length] = "This is a test string"; } var s = stringBuffer.join(""); return new Date().valueOf() - startTime; } function doTests() { var htm = ""; htm += "Time badTest took: " + badTest() + "<br>"; htm += "Time goodTest took: " + goodTest() + "<br>"; htm += "Time betterTest took: " + betterTest(); htm += "<br>" + navigator.userAgent; document.getElementById("result").innerHTML = htm; } </script> </head> <body> <a href="javascript:void(0);" onClick="doTests();">Click here to test</a> <br><br> <div id="result"> </div> </body> </html>

标签：字符串,效率,浏览器

投稿

再谈“字符串拼接”的效率

猜你喜欢

Python实现PDF转MP3的示例代码

ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明

asp用正则解析远程图片地址，用XMLHTTP将其保存

vue项目移动端实现ip输入框问题

七种PHP开发环境搭建工具

tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)

javascript利用apply和arguments复用方法

Linux下安装mysql的教程详解

二级域名的解析指向ASP源码

Python中functools模块的常用函数解析

python Manager 之dict KeyError问题的解决

Python爬虫爬取Bilibili弹幕过程解析

对python .txt文件读取及数据处理方法总结

运用PyTorch动手搭建一个共享单车预测器

css利用锚点控制翻页

详解Python中的数据清洗工具flashtext

详解vue 模版组件的三种用法

再次探讨go实现无限 buffer 的 channel方法

Vue Render函数原理及代码实例解析

JS异步宏队列与微队列原理区别详解

再谈“字符串拼接”的效率

猜你喜欢

Python实现PDF转MP3的示例代码

ASP中Utf-8与Gb2312编码转换乱码问题的解决方法 页面编码声明

asp用正则解析远程图片地址，用XMLHTTP将其保存

vue项目移动端实现ip输入框问题

七种PHP开发环境搭建工具

tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)

javascript利用apply和arguments复用方法

Linux下安装mysql的教程详解

二级域名的解析指向ASP源码

Python中functools模块的常用函数解析

python Manager 之dict KeyError问题的解决

Python爬虫爬取Bilibili弹幕过程解析

对python .txt文件读取及数据处理方法总结

运用PyTorch动手搭建一个共享单车预测器

css利用锚点控制翻页

详解Python中的数据清洗工具flashtext

详解vue 模版组件的三种用法

再次探讨go实现无限 buffer 的 channel方法

Vue Render函数原理及代码实例解析

JS异步宏队列与微队列原理区别详解

ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明