Javascript_javascript スキルに基づく文字列連結のパフォーマンスについて説明します。

WBOY
リリース: 2016-05-16 18:09:46
オリジナル
1141 人が閲覧しました

1 文字列連結を実行するにはどうすればよいですか?

まず、文字列連結の 2 つの一般的な方法を確認してみましょう:
1.1 文字列連結演算子を使用します

一般的に使用される言語 ( など) Java、C#、PHP など) にはすべて文字列連結演算子があり、JavaScript も例外ではありません。 コード例:

コードをコピー コードは次のとおりです:

var str = "";
str = str "a";

1.2 配列の使用

一般的に使用される言語では、文字列の連結処理のパフォーマンスが高くないため、C# では文字列を連結するための StringBuilder が提供されています (Java では StringBuffer が提供されています)。 Javascript には、Array を介して StringBuilder をシミュレートするソリューションがあります。
コードをコピーします コードは次のとおりです。

var str = []
; for (var i = 0; i str[i] = "12345";
str = str.join("");

2 テスト

以下では、文字列をコピーするプロセスを通じて 2 つのメソッドのパフォーマンスをテストします。
2.1 文字列連結演算子を介したコピー:


コードをコピー コードは次のとおりです。 function copyByOperator(str,times) {
var newStr = "";
for (var i = 0; i
}
return newStr;


2.2 配列をコピーします:



コードをコピー
コードは次のとおりです: function copyByArray(str, 回) { var newStr = []; for (var i = 0; i newStr[i] = str;
}
return newStr.join("");
}


str は長さ 61 の固定 HTML 文字列を使用します。

2.3 IE でのテスト

IE のパフォーマンスが比較的低いことを考慮して、最初に小さい値 (6000) を使用して IE 6、IE 7、および IE 8 でテストします。 10 回実行した後の平均値を取ると、結果は次のようになります。


IE6、7、および IE8 のテスト結果は大きく異なります。
IE 8 は文字列連結操作を最適化しており、効率はすでに配列コピー方式
よりも優れています。
IE浏览器下的测试结果
浏览器 copyByOperator copyByArray
IE 6 1780.4ms 9.5ms
IE 7 1754.6ms 7.7ms
IE 8 1.6ms 9.4ms
2.4 さまざまなブラウザでのテスト

以下では、比較的大きな時間値 (50000) を使用して、さまざまなブラウザーの最新バージョンをテストします。

この結果は本当に予想外です。 IE 8 での文字列連結操作は、実際には Chrome を除くすべてのブラウザに負けます。IE のパフォーマンスが低いといつも言う人は注意してください。 Chrome では、文字列の連結操作は配列のコピー方法よりも効率的です。

3 概要

各种浏览器的测试结果
浏览器 copyByOperator copyByArray
IE 8 21.8ms 54.7ms
Firefox 3.6 40.9ms 27.9ms
Chrome 4 4.4ms 10.9ms
Safari 4.0.5 41.6ms 34.6ms
Opera 10.50 33.1ms 23ms
ブラウザのパフォーマンスは常に向上しており、フロントエンド エンジニアは、最高のパフォーマンスを得るために Javascript プログラムの最適化戦略をタイムリーに調整する必要があります。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート