Question

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

弹出窗口的数量是否会影响页面速度？我不太了解javascript框架，以了解加载10个popovers是否与加载2000相同的效果。这就是我想要理解的。

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

Answer 1

我用来最小化这类事物影响的一种方法是使用单个popover / modal / dialog / etc ..然后在显示之前更改它的内容。这样，你在DOM中没有2k额外元素，99％的时间都没有做任何事情。

我使用$(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>'; } }); });选项编写了一个bootstrap popover的示例，并通过在父元素上启用它来进行委派。他们似乎可能遇到任何开销问题。

如果您检查示例的正文，您将看到一个popover div在显示时附加到正文，然后在隐藏时删除。

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>

notifyItemRemoved

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

1 个答案: