弹出窗口的数量是否会影响页面加载速度？

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>