Loading / displaying a large amount of data on a web page

Question

I have a webpage containing a table for displaying a large amount of data (an average of 2,000 to 10,000 rows). This page takes a long time to load / display. It's clear.

The problem is that when loading the memory loading page using PC memory (500 MB iexplorer is used in my test system) and the whole computer stops until it is finished, which may take a minute or two. IE freezes until it is complete, switching to another running program will be the same.

I need to fix this - and ideally, I want to accomplish two things:

1) Download the individual parts of the page separately. Thus, the page can be displayed initially without a large data table. The boot div will be placed there until it is ready.

2) Do not use so much memory or local resources during rendering, so at least they can use another tab / application at the same time.

How do I get along both or any of these?

I am an application programmer by profession, so I'm still a little bit curious about what I can do in a web environment.

Greetings to all.

Answer 1

As for the first part, it is called Ajax: displays a page without a table or with an empty table, and then uses ajax requests to retrieve data (in html or any data format) and displays them.

As for the second part, you need something called lazyloading: the ability to download data only when the user needs it, that is, when it is on the visible part of the document. You can see this question for a DataGrid library that can handle millions of rows.

Answer 2

You can try a few things:

Download data asynchronously as well as paging

Answer 3

Two main options:

• Breakdown
• Lazy loading (loading as the user scrolls). See this jQuery plugin