1ページに多くのdivがあります

Question

画面に表示されない要素を「アンレンダー」する方法はありますか？
多くのdivを持つページがあり、その中にはイベントリスナーが付いているものもあります。 45k div以上のイベントハンドラは非常に遅く実行されているので、不必要な要素をアンレンダーして助けてくれると思いましたか？

FYI - 要素がdisplay: noneの場合、すべて正常に動作します。

Answer 1

45kのイベントリスナーを追加する代わりに、parent-divに1つのイベントリスナーを追加する必要があります。

<div id="container"> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
    <div class="clickable">a</div> 
</div> 

：

はjQueryのを使用すると、このような何かを行うことができます。

$("#container").on('click', '.clickable', function(e) { 
    console.log($(e.target)); 
}) 

これはあなたのJavaScriptコードを改善するはずです。

それはdivのがために使用されることになっているものだ（あなたはまだあなたが自分の位置を計算する必要があります表示されていない要素を非表示にする必要があり、あなたが分割する必要があるときには、あなたのperformence

Answer 2

使用divを減少させる可能性がある場合）セクションを相互に関連付けます。例えばコンテンツからのヘッダー/フッター、またはブログ上の個々の投稿。

ただし、他の要素が意味を成す意味的な意味で使用しないでください。これは重複していませんが、私はここにある情報はあなたに役立つと思います。 Too Many DIVS?