IE6.0でもjs最適化が動作（詳細アレンジ）_javascriptスキル

js の最適化は IE6.0 で機能します。次の点をまとめてみましょう。

1. 文字列のスプライシング: 配列のスプライシングを使用します

コードをコピーします コードは次のとおりです。

function func2(){
var start = new Date().getTime();
var array = []
for(var i = 0; i array[i] = "";

2 つ目、for ループ: まず長さを計算して直接呼び出します

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

function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime(); (var i = 0, len = divs.length; i
//"高効率"
}

3、再描画を減らすページの: 1 つを使用できます。 ページを結合してページに割り当てます

コードをコピーしますコードは次のとおりです。

function func2(){

var obj = document.getElementById("demo");
var start = new Date().getTime(); 🎜>var arr = [];
for(var i = 0; i arr[i] = str i;
}
obj.innerHTML = arr。 join("");



4 番目に、スコープ チェーンの検索数を減らします。複数のページ値を取得する場合は、ドキュメント オブジェクトを定義して、このオブジェクトを

に呼び出します。

コードをコピー コードは次のとおりです。var doc = document; (var i = 0; i var but1 = doc.getElementById("but1");

var but2 = doc.getElementById("but2"); doc.getElementsByTagName("input");
}
}



5. 関数やメソッドを繰り返し呼び出さないでください。

1. 文字列の接続

私たちの開発では文字列の結合が頻繁に発生するため、私たちは = を使用して文字列を直接結合することに慣れています。実際、この結合方法は、文字列を連結するための賢い方法です。配列の結合方法。

コードをコピー

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

//非効率な

function func1(){

var start = new Date().getTime(); var template = "";
for(var i = 0; i template = "";
var end = new Date().getTime();
document.getElementById("one").innerHTML = template;
alert("所要時間:" (終了 - 開始) "ミリ秒" );
}
//効率的な
function func2(){
var start = new Date().getTime();
var array = []; i = 0; i array[i] = "
}
var end = 新しい日付().getTime();
document.getElementById("one").innerHTML = array.join("");
alert("所要時間:" (終了 - 開始) "ミリ秒"); 🎜 >}




さまざまなブラウザでどのように動作するかを見てみましょう




実際、この状況は IE の上位バージョンでも非常に明白ですが、逆に、2 番目のタイプの相対的な効率には大きな違いはありません。はさらに低いですが、その差はわずか 2ms 程度であり、Chrome は Firefox に似ています。さらに、配列に要素を追加する場合、多くの人はプッシュのネイティブ メソッドを使用することを好みますが、実際には、arr[i] または arr[arr.length] を直接使用する方が高速です。 10000。複数のループの場合、IE ブラウザでは 10 ミリ秒以上の差が生じます。

2. for ループ
for ループはよく遭遇する状況です。次の例を見てみましょう。

コードをコピーします

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

var arr = [];
for(var i = 0; i arr[i] = "

" i "

";
}
document.body.innerHTML = arr.join("");

//非効率な
function func1(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0; i // "効率が低い"
}
var end = new Date().getTime();
alert("所要時間:" (end - start) "ミリ秒"); //効率的な
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime(); , len = divs.length;
//"高効率"
var end = new Date().getTime();取得済み:" (終了 - 開始) "ミリ秒");
}

上の表からわかるように、IE6.0 では違いが非常に明白ですが、Firefox と Chrome ではほとんど違いがありません。IE6.0 でこれが発生する理由は主に for ループです。実行の際、最初のケースは毎回長さを計算しますが、2 番目のケースは最初に長さを計算して変数に保存するため、実行効率が高くなります。そのため、for ループを使用するとき、特に必要な場合は、長さを計算するには、変数への保存を開始する必要があります。しかし、配列を操作して配列の長さを取得するだけであれば、それほど明らかな違いはありません。次の例を見てみましょう:

コードをコピー

コードは次のとおりです: var arr2 = [];

for(var i = 0; i arr2[i] = "

" i "
}
//非効率的🎜> function func1(){
var start = new Date().getTime();
for(var i = 0; i //"効率が悪い"
}
var end = new Date().getTime();
alert("所要時間:" (end - start) "ミリ秒");
}
//非常に高い効率的な
関数 func2(){
var start = new Date().getTime();
for(var i = 0, len = arr2.length; i / /"高効率"
}
var end = new Date().getTime();
alert("所要時間:" (end - start) "ミリ秒");






上記の表からわかるように、配列だけであれば、2 つの書き込み方法はほぼ同じであることがわかります。実際、ループを 10 万回まで増やしても、その差はわずかです。ミリ秒なので、配列の場合はすべて同じだと思います。 for ループの最適化については、-=1 を使用するとか、大から小へループするなどの意見も多くありますが、これらの最適化は完全に反映されないことが多いと思います。実際の状況では、すべて一言で言えば、コンピュータレベルでは小さな変更にすぎませんが、コードの可読性が大幅に低下するため、損失する価値はまったくありません。

3. ページの再描画を削減します ページの再描画の削減は、本質的には JS 自体の最適化ではありませんが、多くの場合、JS が原因で発生し、再描画はページのパフォーマンスに重大な影響を与えることが多いため、それを取り除くことが完全に必要です。次の例を見てみましょう:

コードをコピー

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

>
var str = "

これはテスト文字列です

これはテスト文字列です

これはテスト文字列です

これはテスト文字列です

これはテスト文字列です

これはテスト文字列です

これはテスト文字列です div>

これはテスト文字列です

これはテスト文字列です

これはテスト文字列

これはテスト文字列

これはテスト文字列

> ;";
//非効率な
function func1(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
for(var i = 0; i obj.innerHTML = str i;
}
var end = new Date().getTime();時間" (終了 - 開始) "ミリ秒");
}
//効率が高い
function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i arr[i] = str i; 🎜>}
obj.innerHTML = arr.join("");
var end = new Date().getTime();
alert("所要時間" (終了 - 開始) " ミリ秒" );
}


この例では、1000回のループを使用していますが、10,000回のループを使用すると、基本的にブラウザがフリーズします。は100回のループなので、以下の実行結果を見てみましょう。

ご覧のとおり、これはわずか 100 サイクルで驚くべき結果であり、どのブラウザーであっても、実行効率が実際に大幅に向上していることもわかりました。 Firefox よりも優れています。Firefox がページの再描画において最適化を行っていないことがわかります。ここで、一般にページの再描画に影響するのは innerHTML だけではないことにも注意してください。要素のスタイルや位置などを変更すると、ページの再描画がトリガーされるため、通常はこれに注意する必要があります。

4. スコープ チェーン内のルックアップの数を減らします

JS コードが実行されるとき、変数または関数にアクセスする必要がある場合、現在の実行環境のスコープ チェーンをトラバースする必要があり、トラバースは次の方法でこのスコープ チェーン レベルのフロントエンドから開始されることがわかっています。グローバル実行環境まで逆方向にトラバースするため、グローバル環境の変数オブジェクトに頻繁にアクセスする必要がある場合、毎回現在のスコープ チェーンをレベルごとにトラバースする必要があることがよくあります。次の例を見てみましょう:

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

function func1(){
var start = new Date().getTime();
for(var i = 0; i var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用時間 " (終了 - 開始) " 毫秒");
}
function func2(){
var start = new Date().getTime();
var doc = ドキュメント;
for(var i = 0; i var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用時間 " (終了 - 開始) " 毫秒");
}

上面コード中、第 2 の状況は、最初にローカル オブジェクト全体の量を関数里面に保存してから直接参照し、第 1 の状況は次回です。都遍历作用域链，全局境まで，我们看到第二种情实际上只遍历了一次，而第一种情滅却是每次都遍历了，所以我们看其执行結果：

上の表からわかるように、IE 6 ではこの差はあまり顕著ではなく、この差は複数のレベルのフィールド境界および複数の全局所変化量の場合でも非常に顕著に現れます。

5、回避双重解释

双重解释的情况又是我们常会碰到，有的時候我们没怎么考虑到这种情况会影响到效率，双重解释一般在我们使用eval、new Function及びsetTimeout等情下会遇、次の例:

复制代代码如下:

var sum, num1 = 1, num2 = 2; 🎜>function func1(){
var start = new Date().getTime();
for(var i = 0; i var func = new Function(" sum =num1;num1 =num2;num2 ;");
func();
}
var end = new Date().getTime();
alert("time" (end - start) " ミリ秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i num1 =num2;
}
var end().getTime(); " (end - start) " ミリ秒");
}


最初のケースでは二重解釈に new Function を使用し、2 番目のケースでは二重解釈を避けています。さまざまなブラウザでのパフォーマンス:

ご覧のとおり、どのブラウザでも二重解釈には多くのオーバーヘッドがかかるため、実際には二重解釈は可能な限り回避する必要があります。 テストレポートの 4 番目の点の誤りを修正していただいた「SeaSunK」に感謝します。現在は修正されています。最後の点については、func1 は毎回初期化され、比較できないため、eval に変更しました。その結果、IE6.0 では影響があり、Firefox では eval を使用した場合の効率への影響は同等であることがわかりました。 Firefox では 10,000 回ループすると 10 秒以上かかるので、1,000 回に変更しました。コードとレポートを見てください。

コードをコピー

コードは次のとおりです:var sum, num1 = 1, num2 = 2; 関数 func1(){ var start = new Date().getTime();

for(var i = 0; i eval(" =num1; num1 =num2;num2 ;");
}
var end = new Date().getTime();
alert("Time" (end - start) " ミリ秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i sum =num1 ;
num1 =num2 ;
}
var end = new Date().getTime();
alert("Time" (end - start) "ミリ秒");
}