Does the number of popovers affect page load speed?

Question

I have a page with possibly 2000 popovers using bootstrap 4.

Does the number of popovers affect the page speed? I don't know enough about javascript frameworks to understand whether loading 10 popovers has the same effect as loading 2000. That is what I want to understand.

The contents of the popovers is loaded by javascript.

Answer 1

One method I have used to minimize the impact of things like this is to use a single popover/modal/dialog/etc.. and then changed it's contents right before it is shown. This way you don't have 2k extra elements in the DOM that 99% of the time are doing nothing.

I worked up an example of bootstrap popover's using the selector option and delegation by enabling it on a parent element. It appears that they may have any overhead issues worked out.

If you inspect the body of the example, you will see a single popover div appended to the body when it is shown and then removed when it hidden.

$(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>