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

Question

我有一个页面可能有 2000 个弹出窗口，使用 bootstrap 4。

弹出窗口的数量会影响页面速度吗？我对 javascript 框架了解不够，无法理解加载 10 个弹出窗口是否与加载 2000 个弹出窗口具有相同的效果。这就是我想了解的。

弹出窗口的内容由 javascript 加载。

Answer 1

我用来尽量减少此类影响的一种方法是使用单个 popover/modal/dialog/etc.. 然后在它显示之前更改它的内容。这样你就不会在 DOM 中有 2k 额外的元素，99% 的时间什么都不做。

我通过在父元素上启用它来使用 selector 选项和委托制作了 bootstrap 弹出窗口的示例。看来他们可能已经解决了任何开销问题。

如果您检查示例的正文，您会看到一个弹出窗口 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>

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

Does the number of popovers affect page load speed?

javascript

twitter-bootstrap

popover