Slow execution of Bootstrap v4 modal display

Question

Slow execution of Bootstrap v4 modal display

It has come to my attention that the modals in Bootstrap show slower as the page's content increases.

When the page is empty, it only takes less than 100ms to show. However, the time it takes significantly increases as more content is added to the page.

I am puzzled by this connection. Can someone clarify why this behavior occurs and offer a solution to speed up the appearance of modals regardless of the page's size?

UPDATE: To see this for yourself, you can visit i.e here and run the command

console.time("modalTime"); $("#exampleModal").modal("show"); console.timeEnd("modalTime");

in the console to observe the duration. Then, add more content to the page using DOM manipulation, and run the command again.

My findings: modalTime : 70 ms on the original page. modalTime : 1208 ms after increasing the page's content tenfold.

javascript bootstrap-4 bootstrap-modal

Answer 1

Answer №1

Upon further investigation, I have discovered that introducing 50,000 lines of text to the document results in a noticeable delay: https://plnkr.co/edit/hvRAn3wg91GBCPxK2gwb?p=preview

The issue with an extensive DOM structure like this is that any sort of manipulation will require significant time to execute. While it may seem like a jQuery problem, I am inclined to believe otherwise.

To demonstrate that the delay is not directly related to the Modal, I have implemented a simple action where clicking on a button turns its color to red - even this basic operation suffers from the same sluggish performance as opening the modal window.

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"});
  });
});

Update: In addition, I compared jQuery's onClick versus onClick outside of the DOM - no discernible distinction was observed. https://plnkr.co/edit/483Sk2FGXk9lT8dLZIdo?p=info

Update: It appears my previous statement was inaccurate. The root cause of the performance lag stems from the Bootstrap Modal itself. I suspect the bottleneck lies within the _adjustDialog() function in modal.js.

I suggest raising this issue on https://github.com/twbs/bootstrap/issues and providing the Plunker example for reference.

Answer 2

Upon further investigation, I have discovered that introducing 50,000 lines of text to the document results in a noticeable delay: https://plnkr.co/edit/hvRAn3wg91GBCPxK2gwb?p=preview

The issue with an extensive DOM structure like this is that any sort of manipulation will require significant time to execute. While it may seem like a jQuery problem, I am inclined to believe otherwise.

To demonstrate that the delay is not directly related to the Modal, I have implemented a simple action where clicking on a button turns its color to red - even this basic operation suffers from the same sluggish performance as opening the modal window.

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"});
  });
});

Update: In addition, I compared jQuery's onClick versus onClick outside of the DOM - no discernible distinction was observed. https://plnkr.co/edit/483Sk2FGXk9lT8dLZIdo?p=info

Update: It appears my previous statement was inaccurate. The root cause of the performance lag stems from the Bootstrap Modal itself. I suspect the bottleneck lies within the _adjustDialog() function in modal.js.

I suggest raising this issue on https://github.com/twbs/bootstrap/issues and providing the Plunker example for reference.

Slow execution of Bootstrap v4 modal display

Answer №1

Similar questions

At times, the status code 0 and ready state 0 is returned by Ajax file uploads

Is the JavaScript file not being stored in the cache?

Is it possible to prevent the text from appearing in the text box when a button is

JQuery's is() function is returning a true value

Having trouble with jqGrid data format?

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

Enable lightbox functionality prior to all images being fully loaded

Accessing fields from other sources in ng-repeat can be accomplished by utilizing special syntax within the ng-repeat directive

Sorting through a list of strings by checking for a specific character within each string

I am utilizing jQuery's AJAX function with a datatype of HTML to extract a specific portion of the incoming data

What is the best way to notify a user one minute before their cookie expires using PHP and JavaScript?

Can you determine the sequence in which these code statements are placed on the call stack?

Tips for accessing various JSON objects from a JSON document

Tips for verifying the presence of a Firestore Document reference within a JavaScript array of Document references

iOS Simulator offers a range of both offline and online events for testing purposes

Passing events between sibling components in Angular 2Incorporating event emission in

Refreshing table cell contents following a table sort operation

"The Ajax function for replacing a div upon change event is not functioning properly

Adobe Acrobat does not run JavaScript code in documents that are submitted for electronic signatures

Arrange the array based on the order of the enumeration rather than its values