ホームページ ウェブフロントエンド jsチュートリアル IE6.0でもjs最適化が動作(詳細アレンジ)_javascriptスキル

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

May 16, 2016 pm 05:45 PM

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

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

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

function func2(){
var start = new Date().getTime();
var array = []
for(var i = 0; i < ; 10000; 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 ループはよく遭遇する状況です。次の例を見てみましょう。
 style=

コードをコピーします

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




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 ループを使用するとき、特に必要な場合は、長さを計算するには、変数への保存を開始する必要があります。しかし、配列を操作して配列の長さを取得するだけであれば、それほど明らかな違いはありません。次の例を見てみましょう:
 style=

コードをコピー

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

コードをコピー


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



>
var str = "
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
これはテスト文字列です
< ;div>これはテスト文字列です
これはテスト文字列
これはテスト文字列
これはテスト文字列//非効率な
function func1(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
for(var i = 0; i <100; 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 < 100; i ){
arr[i] = str i; 🎜>}
obj.innerHTML = arr.join("");
var end = new Date().getTime();
alert("所要時間" (終了 - 開始) " ミリ秒" );
}


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

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

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 の状況は次回です。都遍历作用域链,全局境まで,我们看到第二种情实际上只遍历了一次,而第一种情滅却是每次都遍历了,所以我们看其执行結果:
 style=

上の表からわかるように、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 < 10000; 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 回に変更しました。コードとレポートを見てください。  style=

コードをコピー

コードは次のとおりです: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) "ミリ秒");
}


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。 関数isvaliddate(s){ var bits = s.split( '/'); var d = new Date(bits [2] '/' bits [1] '/'ビット[0]); return !!(d &&(d.getmonth()1)== bits [1] && d.getdate()== number(bits [0])); } //テスト var

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $( "div.header")。css( "margin"、 "10px"); $( "div.header")。css( "padding"、 "10px"); このコードはそうだと思うかもしれません

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。 タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。 関連記事:10 jQueryタブプラグイン

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください!このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。 関連投稿: 1

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 (デモンストレーションはありません、それを直接firebugにコピーしてください) // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $(this)、 wintop = contentarea.scrolltop()、 docheight = $(d).height()、 winheight = $(w).height()、 divheight = $( '#c

See all articles