【js运算性能系列】拼接字符串的方法及性能比较

周国辉发布于2019-08-21 14:47 / 1916人阅读

摘要：将多个字符串拼接在一起，通常有以下三种方法，在实践中都是经常用到的。先把字符串写入临时数组中，然后调用数组的方法，将其中的字符串元素连接起来。使用字符串的函数。

将多个字符串拼接在一起，通常有以下三种方法，在实践中都是经常用到的。

使用字符串连接符 ‘+’, "string1" + "string2" + ...

使用数组的join函数。先把字符串写入临时数组中，然后调用数组的join方法，将其中的字符串元素连接起来。

使用字符串的concat函数。

方法一：使用字符串连接符 ‘+’

var concat1 = function(str1, str2){
    return str1 + str2;
};

方法二：使用数组的join函数

var concat2 = function(str1, str2){
    var arr = [];
    arr.push(str1);
    arr.push(str2);

    return arr.join();
};

方法三：使用字符串的concat函数

var concat3 = function(str1, str2){
    return str1.concat(str2);
};

性能总结

我在本地用Benchmark对上述两种方法做了性能对比，测试环境为Testing in Chrome 46.0.2490 / Mac OS X 10.10.4，结果如下：

concat#+ x 90,483,047 ops/sec ±2.06% (84 runs sampled)
concat#array-jion x 12,303,912 ops/sec ±0.90% (82 runs sampled)
concat#string-concat x 40,845,196 ops/sec ±0.83% (89 runs sampled)
Fastest is concat#+

也就是说在chrome 46下，使用字符串连接符‘+’的效率要高很多。
当然这只是在chrome 46环境下的测试，并不能代表所有的浏览器平台。

在jsPerf也有类似的性能测试 https://jsperf.com/concat-vs-...
测试效果如下：

到底哪种方法更高效？这跟各浏览器的引擎有关，根据JavaScript 怎样高效拼接字符串？这篇文章，自己做了个简单归纳。（一家之言，没做深入验证）

在旧浏览器（ie7-）下用 join 会更高效。

在现代浏览器，尽量用"+",更高效。

当然，在少数现代浏览器里 “+” 不一定会比 join 快（如，safari 5.0.5，opera 11.10)

本身是字符串数组的，直接 join 会更好。

在"+"与concat之间，当然是优选使用"+"，方便又直观又高效。

海外云主机云服务器性能的方法 gpu 计算及图形处理的高性能计算服务器 js关系运算符的比较 php缓存技术及性能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88034.html

前端性能优化指南

摘要：前端性能优化指南优化缓存异步并不等于即时。操作性能问题主要有以下原因。发生在之前，所以相对来说会造成更多性能损耗。新引擎还对对象属性访问做了优化，解决方案叫，简称。代价是前置的扫描类型编译优化。数组，，闭包变量不在优化范畴之列。前端性能优化指南 AJAX优化缓存AJAX：异步并不等于即时。请求使用GET：当使用XMLHttpRequest时，而URL长度不到2K...

Pink 2019-08-21 10:38 评论0 收藏0
React系列之 React入门

摘要：原文地址是一个库，主要是通过操作数据的方式去操纵，为什么要重造轮子呢，因为觉的目前市面上的框架对于创建大型应用程序不够直观，不能满足需求，所以诞生了。其实说它性能高，只不过是用的方式计算出最小的操作，所以性能就上来了。原文地址：https://gmiam.com/post/react-... React 是一个 JS 库，主要是通过操作数据的方式去操纵 DOM，为什么要重造轮子呢，因...

pf_miles 2019-08-20 11:06 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
我的前端编码习惯 —— js篇

摘要：文件中的代码块可用以下代码块包裹，以减少全局污染。命名规则原则尽量避免潜在命名冲突，避免过于精简，应见名知意。必须与共同使用的构造函数名应以大写字母开头。变量所有的变量必须在使用前进行声明。仅在函数和构造器内使，以明确的上下指向。代码格式规范 1.html中外部脚本引入尽量放在尾部。 2.一个html文件中只写一个代码块。 3.JS文件中的代码块可用以下代码块包裹，以减少全局污染。 ...

LancerComet 2019-08-20 14:34 评论0 收藏0
前端性能优化（JavaScript篇）

摘要：像也是类似的也不建议使用，会降低性能，通过包裹的代码块，作用域链将会额外增加一层，降低索引效率对象的优化缓存需要被使用的对象获取数据的性能有如下顺序从快到慢变量获取数组下标获取对象的整数索引获取对象属性获取对象非整数索引获取。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客优化循环如果现在有个一个data[]数组...

KunMinX 2019-08-19 14:42 评论0 收藏0