When a page becomes unresponsive due to an overload of DOM elements in a list, causing tabs to freeze

Question

When a page becomes unresponsive due to an overload of DOM elements in a list, causing tabs to freeze

My webpage features a two-column layout with a header containing a navigation bar and a footer.

The left column is dedicated to listing items in three different tabs, each tab representing a different item type.

On the right side, one or more maps are displayed to showcase these items.

The issue arises when selecting a tab with a large number of elements, causing the interaction to freeze and impacting responsiveness. This can occur even when not directly interacting with the selected tab, such as hovering over a navigation link.

The page functions fine when the selected tab has fewer items. To illustrate my point, I have created a spike solution.

It's essential to note that this example is a simplified version of my problem, serving as a sample to present my case.

I have been using Chrome developer tools to track the timeline actions. It appears that the issue stems from reflows in the layout rendering caused by jQuery.

Refer to this screenshot of my timeline: https://i.sstatic.net/ex4wI.png

How can I optimize my DOM manipulation to prevent page freezing? Is there a way to instruct the browser not to redraw the left column until instructed?

html css dom optimization responsive-design

Answer 1

Answer №1

Have you considered implementing virtual scroll, infinite scroll, or pagination for a large table instead of creating it all at once?

There are numerous examples available: https://www.sitepoint.com/jquery-infinite-scrolling-demos/

Placing 5k objects in a single line may be overwhelming, in my opinion.

In this scenario, it may be necessary to break up the dom manipulation loop for other tasks in the stack/event loop.

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, 0);
  }

});

Alternatively:

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, i);
  }

});

Answer 2

Have you considered implementing virtual scroll, infinite scroll, or pagination for a large table instead of creating it all at once?

There are numerous examples available: https://www.sitepoint.com/jquery-infinite-scrolling-demos/

Placing 5k objects in a single line may be overwhelming, in my opinion.

In this scenario, it may be necessary to break up the dom manipulation loop for other tasks in the stack/event loop.

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, 0);
  }

});

Alternatively:

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, i);
  }

});

Answer 3

Answer №2

Tips for efficiently manipulating large amounts of elements within a DOM container using JavaScript

After conducting thorough testing and research, I have come to a solution that works effectively.

To optimize performance when hiding or showing elements in the DOM, it is recommended to avoid using 'display: none' and 'display: block' as they can impact the performance, especially with a large amount of data.

Instead, consider shifting the elements out of view without removing them from the DOM. By adjusting the position, the browser does not need to calculate if the content is present or not, resulting in improved performance. Keep in mind that implementing custom tabs may be necessary to override default behavior.

div {
  position: relative;
  left: 0px;
}
div.hide {
  left: -4096px;
  height: 0px;
}

Answer 4

Tips for efficiently manipulating large amounts of elements within a DOM container using JavaScript

After conducting thorough testing and research, I have come to a solution that works effectively.

To optimize performance when hiding or showing elements in the DOM, it is recommended to avoid using 'display: none' and 'display: block' as they can impact the performance, especially with a large amount of data.

Instead, consider shifting the elements out of view without removing them from the DOM. By adjusting the position, the browser does not need to calculate if the content is present or not, resulting in improved performance. Keep in mind that implementing custom tabs may be necessary to override default behavior.

div {
  position: relative;
  left: 0px;
}
div.hide {
  left: -4096px;
  height: 0px;
}

When a page becomes unresponsive due to an overload of DOM elements in a list, causing tabs to freeze

Answer №1

Answer №2

Similar questions

Selecting the correct data type for react-icons

Aligning a child element in the center along the horizontal axis within a parent container that is smaller in width than

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Tips for inserting a personalized image or icon into the ANTD Design menu

Is the item positioned above another item instead of being positioned to the left of it?

Can the <article> tag and all its content be positioned in the center of the webpage?

Stealthy Google Recaptcha integrated with a dynamic AJAX form

The script is malfunctioning on Google Chrome

Toggle the visibility of images with input radio buttons

What is the best way to replace a CSS Background that is already marked as important?

Is it possible to access the ID element of HTML using a variable in jQuery?

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

What is the best way to trigger a new css animation on an element that is already in the midst of

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

Retrieve the erased document using Google's cache feature

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

When the radio button is selected, show a variety of buttons

What is the method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

Font size too large when using the em unit