Enhancing speed on an extensive list without a set height/eliminating the need for virtualization

Question

Enhancing speed on an extensive list without a set height/eliminating the need for virtualization

My webapp includes a feature that showcases exhibitors at an expo. The user can click on "Exhibitors" in the navigation bar to access a page displaying all the exhibitors. Each exhibitor may have different details, some of which may or may not contain data (such as Booth, Videos, etc). To accommodate this variability, fixed row heights were eliminated for better UX.

The problem arises when there are over 500 exhibitors, causing the DOM to freeze while rendering them all. This process can take quite a bit of time, especially on mobile devices. Virtualization seems challenging without fixed row heights. I am now seeking ideas on how to enhance performance without significantly compromising the user experience.

Here's what I've experimented with so far:

Batching the data-binding: Dividing the list into chunks and processing them through a queue with delays to prevent overwhelming execution.
On-demand loading: Initially binding and rendering around 50 exhibitors, then dynamically loading and appending additional chunks as users scroll.

Any thoughts or suggestions would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

When dealing with a list of 500 elements, lazy loading is often the most efficient approach. If the data size from the request is not substantial, you can fetch all necessary data in one go (if it's from a web service) and incrementally add to the list as needed. Alternatively, you can make individual requests for batches of items.

It's crucial to optimize how you add elements to your list by only appending them to the DOM once, rather than creating and adding HTML for each element separately. This strategy minimizes the number of times the DOM has to reflow, significantly boosting performance.

Instead of:

for (i = 0; i < length; i++) {
    $(container).append($('<p>new element</p>'));
}

You should do this:

html = '';
for (i = 0; i < length; i++) {
    html += '<p>new element</p>';
}
$(container).append($(html));

-----Update------ Below is some code I've utilized previously (assuming jQuery is being used)

function contentNearBottom(container, child, threshold) {
    var total_height, current_scroll, visible_height;

    current_scroll = container.scrollTop();
    visible_height = container.height();
    total_height = child.height();

    if (threshold < 0) threshold = 0;

    return ((total_height - threshold) <= (current_scroll - visible_height));
}

function lazyLoadMessages() {
    if (contentNearBottom($("div.content"), $("div.content > ul"), 2500)) {
        // load more data
    }
}

Add this in document ready function

$(document).on('scrollstart scrollstop', 'div.content', function(event) {
    lazyLoadMessages();
});

The HTML structure

<div class="content">
    <ul>
    </ul>
</div>

Answer 2

When dealing with a list of 500 elements, lazy loading is often the most efficient approach. If the data size from the request is not substantial, you can fetch all necessary data in one go (if it's from a web service) and incrementally add to the list as needed. Alternatively, you can make individual requests for batches of items.

It's crucial to optimize how you add elements to your list by only appending them to the DOM once, rather than creating and adding HTML for each element separately. This strategy minimizes the number of times the DOM has to reflow, significantly boosting performance.

Instead of:

for (i = 0; i < length; i++) {
    $(container).append($('<p>new element</p>'));
}

You should do this:

html = '';
for (i = 0; i < length; i++) {
    html += '<p>new element</p>';
}
$(container).append($(html));

-----Update------ Below is some code I've utilized previously (assuming jQuery is being used)

function contentNearBottom(container, child, threshold) {
    var total_height, current_scroll, visible_height;

    current_scroll = container.scrollTop();
    visible_height = container.height();
    total_height = child.height();

    if (threshold < 0) threshold = 0;

    return ((total_height - threshold) <= (current_scroll - visible_height));
}

function lazyLoadMessages() {
    if (contentNearBottom($("div.content"), $("div.content > ul"), 2500)) {
        // load more data
    }
}

Add this in document ready function

$(document).on('scrollstart scrollstop', 'div.content', function(event) {
    lazyLoadMessages();
});

The HTML structure

<div class="content">
    <ul>
    </ul>
</div>

Enhancing speed on an extensive list without a set height/eliminating the need for virtualization

Answer №1

Similar questions

Using jQuery to implement interactive hover effects on individual items within a list

Top align a flexbox layout with three columns

Wrapping an anchor tag with a div in Codeigniter

What is the best way to format a string to display the second value in the string?

Update input field value with data retrieved via ajax call in AngularJS

Developing JavaScript code for preventing blocking

"Assure that setTimeout will be executed within the then method in

HTML and Python synchronize perfectly when handling date formatting

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Enhance Your Website with Php Jquery Autocomplete Feature!

Tips for generating a unique user validation hash or token

What is the best way to design an element that exceeds the size of my physical body

Fill the image with width using Mat

Using Angular and Jade to pass an array from a controller to script tags

Showing RSS feed on Vue.js interface

Looking for a way to include the current page's HTML code when exporting a CSV file

my goal is to transform this text into the background

Ways to detect scrolling activity on the v-data-table module?

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Create a new column in Material UI Grid by adding an empty div element instead of using padding