コミュニティ学ぶツールライブラリレジャー

日本語

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

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

WBOY

リリース： 2016-05-16 17:45:59

オリジナル

1396 人が閲覧しました

今日の 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 イベントを避け、イベントをできるだけ増やす必要があります。 (もちろん、イベント処理の柔軟性も考慮する必要があります)。
デモ:

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