スクリプト開発中、多くの場合、大きな文字列が結合され、特定のルールに従って出力のために大きな文字列にスプライスされます。たとえば、スクリプトコントロールを作成するとき、コントロール全体の外観を制御するHTMLタグの出力。たとえば、AJAXでサーバー側のバック値を取得した後にHTMLタグを動的に分析する場合、ここではスプライシング文字列の特定のアプリケーションについては説明しません。ここでスプライシングの効率について話し合いたいだけです。
コードを書くとき、「 += "演算子、s += stringを使用します。これは最もよく知られている方法です。あなたがそれに気づいたのだろうか。結合された文字列容量が数十Kまたは数百Kである場合、スクリプトの実行は非常に遅く、CPU使用率は非常に高くなります。たとえば
コードコピーは次のとおりです。
var str = "01234567891123456789212345678931234567894123456789";
str+= "512345678961234567897123456781234567899123456789/n";
var result = "";
for(var i = 0; i <2000; i ++)result+= str;
1つのステップで、生成された結果文字列は200kで、1.1秒かかります(これはコンピューター構成に関連しています)、CPUピークは100%です。 (私はより多くのループを行い、より直感的に効果を確認しました)。操作の1段階だけが1秒以上かかり、他のコードに費やされた時間と相まって、スクリプトブロック全体の実行時間は耐えられないことを想像できます。では、最適化ソリューションはありますか?他に方法はありますか?もちろん答えがあります。そうでなければ、この記事を書くのはナンセンスです。
より速い方法は、配列を使用することです。ループを散乱させるとき、それを特定の文字列にスプライスするのではなく、文字列を配列に入れ、最後にarray.join( "")を使用して結果文字列を取得することです。コード例:
コードコピーは次のとおりです。
var str = "01234567891123456789212345678931234567894123456789";
str+= "512345678961234567897123456781234567899123456789/n";
var result = ""、a = new Array();
for(var i = 0; i <2000; i ++)a [i] = str;
result = a.join( ""); a = null;
同じサイズの文字列を組み合わせるのに時間をテストしてテストできます。ここでテストした結果は、<15ミリ秒です。そのユニットはミリ秒であることに注意してください。つまり、このような200kの文字列を組み合わせることで、2つのモードの時間消費は約2桁です。それはどういう意味ですか?これは、後者が彼の仕事を終えて昼食から戻ってきたが、前者はまだクーリーとして働いていることを意味します。テストページを書きます。次のコードをコピーしてHTMファイルとして保存し、Webページで開いて、2つの効率の違いをテストできます。とにかく、私は完了するまでに30分かかる前者をテストしており、後者は0.07秒(10,000ループ)かかります。
コードコピーは次のとおりです。
<body>
文字列スプライシング時間の数<入力id = "totle" value = "1000" size = "5" maxlength = "5">
<入力型= "button" value = "string splicing method" onclick = "method1()">
<input type = "button" value = "配列割り当てメソッド" onclick = "method2()"> <br>
<div id = "method1"> </div>
<div id = "method2"> </div>
<textarea id = "show"> </textarea>
<スクリプト言語= "javascript">
<! -
//この文字列の長さは100バイトです著者:Meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "512345678961234567897123456781234567899123456789/n";
//方法1
関数method1()
{
var result = "";
var totle = parseint(document.getElementbyId( "totle")。値);
var n = new date()。getTime();
for(var i = 0; i <totle; i ++)
{
結果 += str;
}
document.getElementById( "show")。value = result;
var s = "文字列スプライシング方法:スプライスされた大きな文字列は長い"+ result.length+ "byte"+
「分割時間」 +(new date()。gettime() - n) + "milliseconds!";
document.getElementById( "Method1")。innerhtml = s;
}
//方法2
関数method2()
{
var result = "";
var totle = parseint(document.getElementbyId( "totle")。値);
var n = new date()。getTime();
var a = new Array();
for(var i = 0; i <totle; i ++)
{
a [i] = str;
}
result = a.join( ""); a = null;
document.getElementById( "show")。value = result;
var s = "配列割り当て結合方法:スプライスされた大きな文字列は長い" + result.length + "byte、" +
「分割時間」 +(new date()。gettime() - n) + "milliseconds!";
document.getElementById( "Method2")。innerhtml = s;
}
//->
</script>
最後に、もう少し言葉を言います。すべての文字列スプライシングは、アレイを将来結合しますか?これは、実際のニーズに依存します。オープニングアレイ変数も消費されるため、いくつかまたはkレベルのバイトの通常の組み合わせに配列メソッドを使用する必要はありません。 K弦の組み合わせがいくつかある場合、アレイが効率的であることを意味します。
IE 6.0:
弦のスプライシング方法:スプライスされた大きな弦の長さは1010,000バイトで、スプライシングには22,089ミリ秒かかります!
配列割り当て結合方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライスには218ミリ秒かかります!
Firefox 1.0:
弦のスプライシング方法:スプライスされた大きな弦の長さは1010,000バイトで、スプライシングには1044ミリ秒かかります!
配列割り当て結合方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライシングには1044ミリ秒かかります!
モジラ1.7:
弦のスプライシング方法:スプライスされた大きな弦の長さは1010,000バイトで、スプライシングには1045ミリ秒かかります!
配列割り当て結合方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライシングには1044ミリ秒かかります!
Netscape 7.0:
文字列スプライシング方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライシングには10,273ミリ秒かかります!
配列割り当て結合方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライスに1138ミリ秒かかります!
オペラ7.54:
文字列スプライシング方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライシングには6968ミリ秒かかります!
配列割り当て結合方法:スプライスされた大きな文字列の長さは1010,000バイトで、スプライシングには6922ミリ秒かかります!
10,000サイクルのテスト結果は、IEとNetscapeで効率を大幅に改善できることを示していますが、Firefox Mozilla Operaでは、2つの方法にほぼ同じ時間がかかります。これらのデータは、配列結合方法が従来の文字列スプライシングよりも優れていると判断するのに十分な場合があります。