検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ページのレンダリング時間を高速化し、Dom レベル 0 の Event_javascript テクニックを無効にする

ページのレンダリング時間を高速化し、Dom レベル 0 の Event_javascript テクニックを無効にする

WBOY
WBOYオリジナル
2016-05-16 17:45:591369ブラウズ

今日の Web アプリケーションはますます複雑になっており、ユーザーがトリガーするさまざまなイベントに応答する必要があるため、HTML ページの DOM 要素にイベント リスニング関数を追加することが避けられません。イベント リスニング関数を DOM 要素にバインドする方法:
1: ページ html:


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


2: ページ html:


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

JavaScript:


コードをコピー コードは次のとおりです。 document.getElementById(“btn”).atachEvent(“onclick”,test); //ie

これら 3 つのメソッドの機能的効果と違いは誰もが知っているので、ここでは詳しく説明しません。ただし、これら 3 つのメソッドはページのレンダリング速度とリソース消費に大きく異なります。 .
テキストの背後にある HTML コードは、IE ブラウザーで開き、さまざまなコード セグメントに注釈を付けることでページの実行効果を確認できます。最も効率が低く、ページ ノードの増加に伴い、IE7 で実行するとページのレンダリング時間は約 670 ミリ秒になります。
2 番目の方法の方が明らかに優れており、IE7 では約 250 ミリ秒です。 3 番目の方法が最適です。Web フロントエンド開発で推奨される標準的な書き込み方法でもあります。
次に、イベント バインディングのロジックを削除すると、所要時間は 188 ミリ秒になります。バインディング イベントを使用しない DOM 要素のレンダリングはわずか 125 ミリ秒であり、表示されるイベント バインディングの時間消費は依然として非常に大きく、特に最初のメソッド (Dom Level 0 Event) が最も時間がかかります。さらに、各コードを実行するときに、タスク マネージャーを開いて、ブラウザーに対応するプロセスを見つけて、コードの実行時の CPU 消費量とメモリ使用量を確認するとよいでしょう。
Dom レベルが確認できます。 0 イベントは CPU を大幅に消費します。


メモリ消費量の分析
:
ブラウザを再度開きます。空白ページのメモリ使用量は約 37M、ページ後の仮想メモリは 28M です。レンダリングされます:
1 メモリ使用量は 54M、仮想メモリは 41M
2 メモリ使用量は 44M、仮想メモリは 31M
3 メモリ使用量は 44M、仮想メモリは 31M
Dom Level 0 Event のメモリ消費量が他のメソッドをはるかに上回っていることがわかります。 Dom Level 0 Event はなぜこのようにシステム リソースを消費するのでしょうか。簡単な分析を行います。
分析を容易にするために、コード を変更して、ページを実行します。 IE のスクリプト デバッガーでは、スタック呼び出し項目が見つかります。この関数はどこから来たのでしょうか? ブラウザが Dom レベル 0 イベントをバインドすると、自動的に生成されることがわかります。コードを含む匿名関数を作成し、この匿名関数をイベントにバインドします。




Copy code


コード
document.getElementById(“btn”).onclick = function(event){ test () } ;
IE ブラウザは、まったく同じ内部関数を持つ多数の匿名関数を区別してそれらの参照をマージするほど賢くはありません。そのため、バインドされる DOM イベントが増えるにつれて、匿名関数の数も増えていきます。宣言される匿名イベント処理関数が多数あるため、なぜこれほど多くのシステム リソースが消費されるのかを理解するのは難しくありません。

DOM 要素の数が増えると、このリソースの消費も増加します。さらに深刻なのは、ページを更新してみると、更新回数が増えるにつれてページの実行が遅くなり、CPU の消費量が増加し、メモリもわずかに増加することがわかります。 0 イベント 時間の延長と CPU 消費の累積については、ブラウザが多くの匿名関数によって占有されているリソースの解放に忙しいことが推測されます。さらに、IE ブラウザはバブリング イベント モデルに基づいているため、子要素のイベントは親要素にバブリングします。そのため、より極端な最適化は、多くの子要素のイベント バインディングを削除し、イベントを親要素にバインドすることです。後のデモでは、この点についても試みられており、CPU とメモリの消費量が最も少ないだけでなく、クリーンな HTML ページのレンダリングと同じであることがわかります。
そのため、ページ イベント バインディングでこれを行う必要があり、Dom レベル 0 イベントを避け、イベントをできるだけ増やす必要があります。 (もちろん、イベント処理の柔軟性も考慮する必要があります)。
デモ:



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



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

    関連記事

    続きを見る