javascript - Bootstrap v4 .modal ("show") 执行缓慢

Question

我注意到随着页面内容变得更加重要， Bootstrap 的模式需要时间来显示。

当页面为空时，显示时间不到 100 毫秒，但随着页面中的内容量变得更重要，需要的时间也相应增加。

我不明白这种相关性。任何人都可以解释这种行为并建议一种解决方法，以使模式外观更快独立于页面大小吗？

编辑 :您可以通过去重现该行为，即 here并执行命令
console.time("modalTime"); $("#exampleModal").modal("show"); console.timeEnd("modalTime");
在控制台中，查看需要多少时间。然后通过操作 DOM 向页面添加更多内容并重新执行命令。

我的结果 : modalTime : 70 ms在原始页面上。 modalTime : 1208 ms将页面内容放大 10 倍后。

Answer 1

好的，如果我在文档中添加 50.000 行文本，我可以重现延迟:
https://plnkr.co/edit/hvRAn3wg91GBCPxK2gwb?p=preview

像这样巨大的 DOM 的问题是，任何操作都需要很长时间。
这可能是jQuery的问题，但我怀疑。

为了证明延迟与 Modal 无关，我在单击时将按钮涂成红色——即使是这个简单的 Action 也需要打开模态窗口的时间。

jQuery(document).ready(function() {
  for (var i = 0; i < 50000; i++) {
    $( "#content" ).append( "This is just some test. This is just some test. This is just some test. This is just some test. This is just some test. This is just some test. This is just some test. This is just some test. This is just some test. <br/>" );
  }

  $("#btnToggleMoadal").click(function(e) {
    $("#exampleModal").modal("show");
    $(this).css({backgroundColor:"red"});
  });
});

编辑:我还在 DOM 中测试了 jQuery 的 onClick 与 onClick - 但没有区别。 https://plnkr.co/edit/483Sk2FGXk9lT8dLZIdo?p=info

编辑:我必须纠正我的答案。这绝对是导致性能问题的引导模式。我认为问题出在 modal.js 中的 _adjustDialog() 附近。

我建议在 https://github.com/twbs/bootstrap/issues 上打开一个问题并展示 Plunker 示例。