Question

我注意到，随着页面内容变得越来越重要，引导程序的模式需要时间才能显示。

显示页面何时为空不到100ms，但是随着页面内容量的增加，会花费更多的时间。

我不了解这种关联。任何人都可以解释这种现象并提出解决方法，以使模式显示更快，而与页面大小无关吗？

编辑：您可以通过即 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的问题，但我对此表示怀疑。

为证明延迟与模式无关，我在单击按钮时将按钮涂成红色-即使此简单操作也需要打开模式窗口。

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

编辑：我必须更正我的答案。绝对是导致性能问题的Bootstrap模式。我认为问题出在modal.js中的_adjustDialog（）周围。

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

Bootstrap v4 .modal（“ show”）执行缓慢

1 个答案: