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

この記事では、javascript に関する関連知識を提供します。主に JavaScript のメモリとパフォーマンスの問題について紹介します。これには、ボタンが多すぎる、イベント ハンドラーの削除などの問題を解決する方法が含まれます。お待ちください。みんなを助けます。

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

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

イベントのためハンドラー インタラクションは最新の Web アプリケーションで可能であるため、多くの開発者がページ内でインタラクションを頻繁に使用するという間違いを犯しています。JavaScript では、ページ内のイベント ハンドラーの数はページ全体のパフォーマンスに直接関係します。理由としては、①各関数はオブジェクトでありメモリ空間を占有するため、オブジェクトの数が増えるとパフォーマンスが低下する、②特定のイベントハンドラに必要なDOMアクセス回数により、まず全体の遅延が発生する、などの理由が考えられます。ページのインタラクション。

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

1. innerHTML を使用するための否定的な教材

for(let value of values){
	ul.innerHTML += '

${value}

';}

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

2.

let itemsHtml = "";for(let value of values){
	itemsHtml  += '

${value}

';}ul.innerHTML = itemsHtml;

の解決方法 この変更後は効率が大幅に向上します. innerHTML のみが一度割り当てられます. 次のコードも実行できます:
ul.innerHTML = value.map(value => '<li>${value}</li>').join(' ');

3. ボタンが多すぎる問題を解決するには?

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

• 比比东
• 云韵
• 美杜莎

これには 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("我是美杜莎！");})

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

let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
	let target = event.target;
	switch(target.id){
		case "girl1":
			console.log("我是比比东！");
			break;
		case "girl2":
			console.log("我是云韵！");
			break;
		case "girl3":
			console.log("我是美杜莎！");
			break;
	}})

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

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

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

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

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

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

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

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

2. ページのアンロードでは、メモリ内の残留参照の問題も発生します

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

六、如何解决循环中动态添加p，造成的死循环问题？

表达式

let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length let document.body.appendchild><h3><strong>表达式</strong></h3><pre class="brush:php;toolbar:false">let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len let document.body.appendchild><p>表达式①中第一行取得了包含文档中所有<code><p></p></code>元素的HTMLCollection。因为这个集合是实时的，所以任何时候只要向页面中添加一个新的<code><p></p></code>元素，再查询这个集合就会多一项。因为浏览器不希望保存每次创建的集合，所以就会在每次访问时更新集合。每次循环都会求值<code>i ，这意味着要获取所有<code><p></p></code>元素的查询。因为循环体中创建并向文档中添加一个新的<code><p></p></code>元素，所以每次循环ps.length的值也会递增。因为两个值都会递增，所以i永远不会等于<code>ps.length</code>，因此表达式①会造成死循环。<br> 而表达式②中，又初始化了一个保存集合长度的变量len，因为len保存着循环开始集合的长度，而这个值不会随集合增大动态增长（<code>for循环中初始化变量处只会初始化一次</code>），所以就可以避免表达式①中出现的无穷循环问题。<br> 如果不想初始化一个变量，也可以使用反向迭代：</code></p>
<h3><strong>表达式</strong></h3>
<pre class="brush:php;toolbar:false">let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

七、JavaScript思维导图

相关推荐：javascript教程

以上がJavaScript のメモリとパフォーマンスの問題についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。