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

周國輝發(fā)布于2019-08-21 14:47 / 2066人閱讀

摘要：將多個字符串拼接在一起，通常有以下三種方法，在實踐中都是經(jīng)常用到的。先把字符串寫入臨時數(shù)組中，然后調(diào)用數(shù)組的方法，將其中的字符串元素連接起來。使用字符串的函數(shù)。

將多個字符串拼接在一起，通常有以下三種方法，在實踐中都是經(jīng)常用到的。

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

使用數(shù)組的join函數(shù)。先把字符串寫入臨時數(shù)組中，然后調(diào)用數(shù)組的join方法，將其中的字符串元素連接起來。

使用字符串的concat函數(shù)。

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

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

方法二：使用數(shù)組的join函數(shù)

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

    return arr.join();
};

方法三：使用字符串的concat函數(shù)

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

性能總結

我在本地用Benchmark對上述兩種方法做了性能對比，測試環(huán)境為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環(huán)境下的測試，并不能代表所有的瀏覽器平臺。

在jsPerf也有類似的性能測試 https://jsperf.com/concat-vs-...
測試效果如下：

到底哪種方法更高效？這跟各瀏覽器的引擎有關，根據(jù)JavaScript 怎樣高效拼接字符串？這篇文章，自己做了個簡單歸納。（一家之言，沒做深入驗證）

在舊瀏覽器（ie7-）下用 join 會更高效。

在現(xiàn)代瀏覽器，盡量用"+",更高效。

當然，在少數(shù)現(xiàn)代瀏覽器里 “+” 不一定會比 join 快（如，safari 5.0.5，opera 11.10)

本身是字符串數(shù)組的，直接 join 會更好。

在"+"與concat之間，當然是優(yōu)選使用"+"，方便又直觀又高效。

云服務器 GPU云服務器性能的方法 gpu 計算及圖形處理的高性能計算服務器 js關系運算符的比較 php緩存技術及性能

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88034.html

前端性能優(yōu)化指南

摘要：前端性能優(yōu)化指南優(yōu)化緩存異步并不等于即時。操作性能問題主要有以下原因。發(fā)生在之前，所以相對來說會造成更多性能損耗。新引擎還對對象屬性訪問做了優(yōu)化，解決方案叫，簡稱。代價是前置的掃描類型編譯優(yōu)化。數(shù)組，，閉包變量不在優(yōu)化范疇之列。前端性能優(yōu)化指南 AJAX優(yōu)化緩存AJAX：異步并不等于即時。請求使用GET：當使用XMLHttpRequest時，而URL長度不到2K...

Pink 2019-08-21 10:38 評論0 收藏0
React系列之 React入門

摘要：原文地址是一個庫，主要是通過操作數(shù)據(jù)的方式去操縱，為什么要重造輪子呢，因為覺的目前市面上的框架對于創(chuàng)建大型應用程序不夠直觀，不能滿足需求，所以誕生了。其實說它性能高，只不過是用的方式計算出最小的操作，所以性能就上來了。原文地址：https://gmiam.com/post/react-... React 是一個 JS 庫，主要是通過操作數(shù)據(jù)的方式去操縱 DOM，為什么要重造輪子呢，因...

pf_miles 2019-08-20 11:06 評論0 收藏0
XCel 項目總結 - Electron 與 Vue 的性能優(yōu)化

摘要：而這里的單元格信息是唯一的，所以直接通過為一個空對象賦值即可。和相關的知識和技巧高亮的列單元格采用展示。在中，被選中的單元格會高亮相應的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個 Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對 Excel 數(shù)據(jù)進行篩選。 XCEL...

XUI 2019-08-22 10:45 評論0 收藏0
我的前端編碼習慣 —— js篇

摘要：文件中的代碼塊可用以下代碼塊包裹，以減少全局污染。命名規(guī)則原則盡量避免潛在命名沖突，避免過于精簡，應見名知意。必須與共同使用的構造函數(shù)名應以大寫字母開頭。變量所有的變量必須在使用前進行聲明。僅在函數(shù)和構造器內(nèi)使，以明確的上下指向。代碼格式規(guī)范 1.html中外部腳本引入盡量放在尾部。 2.一個html文件中只寫一個代碼塊。 3.JS文件中的代碼塊可用以下代碼塊包裹，以減少全局污染。 ...

LancerComet 2019-08-20 14:34 評論0 收藏0
前端性能優(yōu)化（JavaScript篇）

摘要：像也是類似的也不建議使用，會降低性能，通過包裹的代碼塊，作用域鏈將會額外增加一層，降低索引效率對象的優(yōu)化緩存需要被使用的對象獲取數(shù)據(jù)的性能有如下順序從快到慢變量獲取數(shù)組下標獲取對象的整數(shù)索引獲取對象屬性獲取對象非整數(shù)索引獲取。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客優(yōu)化循環(huán) 如果現(xiàn)在有個一個data[]數(shù)組...

KunMinX 2019-08-19 14:42 評論0 收藏0