JavaScript のメモリとパフォーマンスの問題についての深い理解

VUE3.0 をすぐに使い始める方法: 学習

関連の推奨事項に入る: JavaScript チュートリアル

1. JavaScript のメモリとパフォーマンスとは何ですか?

イベント ハンドラーは最新の Web アプリケーションで対話できるため、多くの開発者はページ内で誤って多数のイベント ハンドラーを使用します。 JavaScript では、ページ上のイベント ハンドラーの数はページの全体的なパフォーマンスに直接関係します。理由はさまざまです。たとえば、①各関数はオブジェクトであり、メモリ領域を占有するため、オブジェクトの数が増えるとパフォーマンスが低下します。②指定されたイベント ハンドラーに必要な DOM アクセスの回数が最初に全体の遅延を引き起こします。ページのインタラクション。

2. innerHTML のパフォーマンスの問題について話しますか?

1. innerHTML のネガティブ教材を

(let 値の値) { に

	ul.innerHTML += '<li>${value}</li>';}

このコードは、innerHTML を反復ごとに 1 回設定する必要があるだけでなく、各ループで最初に innerHTML を読み取る必要があるため、非効率的です。つまり、innerHTML は 1 つのループで 2 回アクセスする必要があります。

let itemsHtml = "";for(let value ofvalues){

の解決方法

	itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml;

この変更後は、innerHTML のみに値を割り当てることもできます。 :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

3. ボタンが多すぎる問題を解決するにはどうすればよいですか?

イベント ハンドラーが多すぎる場合の解決策は、イベント委任を使用することです。イベント委任ではイベント バブリングを活用し、1 つのイベント ハンドラーのみを使用して 1 種類のイベントを管理できます。たとえば、クリック イベントがドキュメントにバブルアップします。これは、クリック可能な要素ごとに個別のイベント ハンドラーを指定するのではなく、ページ全体に対して onclick イベント ハンドラーを指定できることを意味します。

<ul id="myGirls">
	<li id="girl1">ビビ・ドン</li>
	<li id="girl2">ゆんゆん</li>
	<li id="girl3">Medusa</li></ul>

これには、クリックされたときに特定のアクションを実行する 3 つのリスト項目が含まれています。通常の方法は、3 つのイベント ハンドラーを指定することです。

let item1 = document.getElementById("girl1 ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
	console.log("私はビビドンです!");})item2.addEventListener("click",(event) => {
	console.log("私はゆんゆんです！");})item3.addEventListener("click",(event) => {
	console.log("I am Medusa!");})

同一のコードが多すぎて、コードが醜すぎます。
イベント委任を使用すると、複数の要素の共通の祖先ノードにイベント ハンドラーを追加するだけで、この醜さを解決できます。

let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
	ターゲット = イベント.ターゲットにします;
	スイッチ(ターゲット.id){
		ケース「女の子1」:
			console.log("私はビビドンです！");
			壊す;
		ケース「女の子2」:
			console.log("私はゆんゆんです！");
			壊す;
		ケース「女の子3」:
			console.log("私はメデューサです!");
			壊す;
	}})

4. イベント委任の利点は何ですか?

• ドキュメント オブジェクトはいつでも使用でき、いつでも (DOMContentLoaded や読み込みイベントを待たずに) イベント ハンドラーを追加し、それを使用してページ内の何らかのタイプのすべてのイベントを処理できます。これは、ページがクリック可能な要素をレンダリングしている限り、遅延なく動作することを意味します。

• ページ イベント ルーチンのセットアップに費やす時間を節約します。

• ページ全体に必要なメモリを削減し、全体的なパフォーマンスを向上させます。

5. イベント ハンドラーの削除

イベント ハンドラーを要素に割り当てることにより、ブラウザ コードとページの対話を担当する JavaScript コードとの間に接続が確立されます。このような接触が再開されるほど、ページのパフォーマンスは悪化します。イベント委任を通じてそのような接続を制限することに加えて、未使用のイベント ハンドラーはすぐに削除する必要があります。多くの Web アプリケーションのパフォーマンス低下は、メモリ内に残っている不要なイベント ハンドラーが原因で発生します。
この問題には 2 つの理由があります。

DOM メソッドのremoveChild() または replaceChild() を使用したノードの削除など、

イベント ハンドラーを使用した要素の削除。

最も一般的な方法は、innerHTML を使用してページの特定の部分を全体として置き換えることです。このとき、innerHTMLによって削除された要素にイベントハンドラが存在すると、ガベージコレクションプログラムによって正常にクリーンアップされません。
したがって、要素が削除されることがわかっている場合は、 btn.onclick = null;//删除事件处理程序など、そのイベント ハンドラーを手動で削除する必要があります。 innerHTML に置き換えられる場合は、要素にイベント ハンドラーを追加せず、上位レベルのノードに追加するだけです。

によって、ページのアンロード後にイベント ハンドラがクリーンアップされない場合、メモリ内に

残留参照の問題が発生する可能性があります。

その後、ブラウザーがページをロードおよびアンロードするたびに (進む、戻る、更新するなど)、イベント ハンドラーがリサイクルされないため、メモリ内の残留オブジェクトの数が増加します。
一般に、ページがアンロードされる前に、onunload イベント ハンドラー内のすべてのイベント ハンドラーを削除することが最善です。イベント デリゲーションの利点は、この時点でもわかります。イベント ハンドラーが少ないため、削除するイベント ハンドラーを覚えやすいです。

6. ループ内に p を動的に追加することによって引き起こされる無限ループ問題を解決するにはどうすればよいですか?

式

let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

式

let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

式①の 1 行目は、ドキュメント内のすべての<p>要素を含む HTMLCollection を取得します。このコレクションはリアルタイムであるため、新しい<p>要素をページに追加してこのコレクションをクエリすると、項目が 1 つ増えます。ブラウザーはコレクションが作成されるたびにコレクションを保存したくないため、アクセスするたびにコレクションを更新します。各ループはi < ps.lengthを評価します。これは、すべての<p>要素を取得するクエリを意味します。新しい<p>要素が作成され、ループ本体内のドキュメントに追加されるため、ps.length の値もループを通過するたびに増加します。両方の値がインクリメントされるため、 i はps.lengthと等しくなりません。そのため、式①は無限ループを引き起こします。
式②では、セットの長さを保持する変数 len が初期化されます。これは、len がループの開始時にセットの長さを保持しており、この値がセットの増加に応じて動的に増加することはありません ( for循环中初始化变量处只会初始化一次) ので、式①に現れる無限ループの問題を回避できます。
変数を初期化したくない場合は、逆反復を使用することもできます。

式

let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
	let p = document.createElement("p");
	document.body.appendChild(p);}

7. JavaScript マインドマップ

関連する推奨事項: JavaScript チュートリアル

上記は、JavaScript のメモリとパフォーマンスの問題について詳しく説明したものです。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。