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

Struggling to Position Advertisement in CSS

Encountered a problem when injecting the angularjs $location service

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

Access the most recent state value with React's Context API

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

What is the best way to retrieve a PHP response using jQuery's .load method

Tips for accessing an Angular service from different Angular controllers

Create a speech bubble using only CSS, featuring a partially see-through background and a stylish border

What is the best way to access an item within an item using HTML and AngularJS?

I'm having trouble getting my JavaScript code to run, can anyone offer any advice on what

Table design with fixed left columns and header that adjust to different screen sizes

How to fetch an image from a web API using JavaScript

What is the process of extracting values from a Range Slider in JQuery - IonRangeSlider?

Setting up Webpack for react-pdf in a Next.js application

Tips on avoiding quotation marks in a Less variable containing a color identifier

Redis: Unable to establish a connection as net.connect is not recognized as a

What occurs when you use the statement "import someModuleName from someModule" in JavaScript?

Error: The method of promise.then is not recognized as a function

Calling an Ajax request from a subdomain to the main domain