スクリプトの開発プロセスでは、大きな文字列が特定のルールに従って結合され、結合されて出力されることがよくあります。例えば、スクリプトコントロールを書く場合、コントロール全体の見た目を制御するHTMLタグの出力や、AJAXでサーバー側の戻り値を取得した後に動的に解析してHTMLタグを作成する場合などですが、具体的な応用例については割愛します。ここで文字列のスプライスについて説明したいと思います。スプライシングの効率について説明しましょう。
文字列の結合を記述するときは、常に「+=」演算子を使用します。s += String です。これは、結合された文字列の容量が次のとおりであることに気づいたかどうかわかりません。数十、さらには数百 K の場合、スクリプトの実行は非常に遅くなり、CPU 使用率は非常に高くなります。たとえば、
次のようになります
。
str+= "51234567896123456789712345678981234567899123456789n";
var 結果 = "";
for(var i=0; i<2000; i++) result += str;
たった 1 つのステップで、結果の文字列は 200K、所要時間は 1.1 秒 (これはコンピュータの構成に関係します)、CPU のピーク値は 100 です。 %。 (エフェクトをより直感的に確認するために、さらにループをいくつか作成しました)。このような操作ステップだけで 1 秒以上の時間が費やされ、他のコードの時間と合わせると、スクリプト ブロック全体の実行時間が耐え難いものになると考えられます。最適化ソリューションはありますか?他に方法はありますか?答えはもちろんイエスです。そうでなければ、私がこの記事を書くのはナンセンスです。
より速い方法は、ループ内で結合する場合、文字列に結合するのではなく、文字列を配列に入れ、最後に array.join("") を使用して結果の文字列を取得することです。 :
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
var result = ""、a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
同じサイズの文字列を結合するのにかかる時間をテストできます。単位はミリ秒であることに注意してください。これは、このような 200K 文字列をアセンブルするには、2 つのモードでほぼ 2 桁の時間がかかることを意味します。それはどういう意味ですか？これは、後者が仕事を終えて昼食から戻ってきたのに対し、前者はまだ激務を続けていることを意味します。次のコードをコピーして HTM ファイルとして保存し、Web ページで開いて 2 つの効率の違いをテストできます。とにかく、私がテストしたのは前者が完了するまでに 30 分かかるということです。 、後者は 0.07 秒 (10,000 回ループ) で実行できます。
<本文>
文字列の連結数<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="文字列の結合方法" onclick="method1()">
<input type="button" value="配列代入結合方法" onclick="method2()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="幅: 100%; 高さ: 400"></textarea>
<スクリプト言語="JavaScript">
<!--
//この結合された文字列の長さは 100 バイトです 著者: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
//方法 1
関数メソッド1()
{
var 結果 = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
for(var i=0; i<totle; i++)
{
結果 += 文字列;
document.getElementById
("show").value = 結果;
var s = "文字列の結合方法: 結合後の大きな文字列の長さ"+ result.length +"bytes,"+
"スプライシングには時間がかかります" + (new Date().getTime()-n) + "ミリ秒!";
document.getElementById("method1").innerHTML = s;
}
//方法2
関数メソッド2()
{
var 結果 = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
var a = new Array();
for(var i=0; i<totle; i++)
{
a[i] = str;
}
結果 = a.join(""); a=null;
document.getElementById("show").value = 結果;
var s = "配列代入結合方法: 結合後の大きな文字列の長さ"+ result.length +"bytes,"+
"スプライシングには時間がかかります" + (new Date().getTime()-n) + "ミリ秒!";
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
最後に、少し言わせてください。将来、配列結合は文字列の結合に使用されるのでしょうか?これは実際のニーズによって異なります。数バイトまたは K レベルのバイトの通常の組み合わせの場合、配列変数を開くのもコストがかかるため、配列メソッドを使用する必要はありません。 K 文字列の組み合わせが複数ある場合、配列の効率は高くなります。
-------------------------------------------------- ----------
IE 6.0:
文字列の結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 22,089 ミリ秒かかります。
配列割り当て結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 218 ミリ秒かかります。
Firefox 1.0:
文字列の結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 1,044 ミリ秒かかります。
配列割り当て結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 1,044 ミリ秒かかります。
モジラ 1.7:
文字列の結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 1,045 ミリ秒かかります。
配列割り当て結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 1,044 ミリ秒かかります。
ネットスケープ 7.0:
文字列の結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 10,273 ミリ秒かかります。
配列割り当て結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 1,138 ミリ秒かかります。
オペラ 7.54:
文字列の結合方法: 結合された大きな文字列の長さは 1,010,000 バイトで、結合には 6,968 ミリ秒かかります。
配列割り当て結合方法: 結合された大きな文字列の長さは 1010000 バイトで、結合には 6922 ミリ秒かかります。
10,000 回ループしたテスト結果は、IE と Netscape では効率が大幅に向上することを示していますが、Firefox Mozilla Opera での 2 つの方法の時間消費量は基本的に同様です。これらのデータは、配列結合方法がより優れていることを判断するのに十分です。伝統的な文字列の接続。