ポップオーバーの回数はページの読み込み速度に影響しますか？

Question

ブートストラップ4を使用して2000ポップオーバーの可能性があるページがあります。

ポップオーバー数がページのスピードに影響しますか？私は、10のポップオーバーをロードするのが2000年をロードするのと同じ効果を持つかどうかを理解するために、JavaScriptのフレームワークについて十分に知りません。

popoversの内容はjavascriptによって読み込まれます。

Answer 1

これのようなものの影響を最小限に抑えるために使用した方法の1つは、単一のポップオーバー/モーダル/ダイアログ/などを使用して、内容が変更される前に内容を変更することです。この方法では、99％の時間が何もしていないDOMに2kの余分な要素がありません。

私は、selectorオプションと委任を使用して、それを親要素で有効にしてブートストラップポップオーバーの例を取り上げました。オーバーヘッドの問題が解決されているようです。

例の本文を調べると、表示されたときに本文に追加された単一のポップオーバーのdivが表示され、隠されたときに削除されます。

$(function() { 
 
    var $table = $('#test'); 
 

 
    for(var i = 0; i < 20; i++) { 
 
    var row = $('<tr />'); 
 
    for(var j = 0; j < 100; j++) { 
 
     var td = $('<td />').attr({id: (i * 100) + j, tabindex: -1}); 
 
     row.append(td); 
 
    } 
 
    $table.append(row); 
 
    } 
 
    
 
    $table.popover({ 
 
    html: true, 
 
    container: 'body', 
 
    trigger: 'focus', 
 
    selector: 'td', 
 
    content: function() { 
 
     return '<p>This is my id: ' + $(this).attr('id') + '</p>'; 
 
    } 
 
    }); 
 
});

td { 
 
    height: 25px; 
 
    width: 25px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table id="test"> 
 
</table>