CODEWITHSUNDEEP
htmldatabase
Bish25
Bish25

Reputation: 616

Loading large amounts of data in html

Can you tell me the best way to load large amounts of data into html web page? I have a nice layout which works well, however I am worried that once the database starts to fill up, this will make a significant impact of the performance. Would it be best for me to use a data table and would lazy loading be a good option. I'm just trying to do some research before I get deep into the project and realise i'm taking the wrong path. This is the current client view

<div class="row">
            <div class="col-lg-4">
                <div class="contact-box">
                    <a href="profile.html">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="img/a2.jpg">
                            <div class="m-t-xs font-bold">Graphics designer</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h3><strong>John Smith</strong></h3>
                        <p><i class="fa fa-map-marker"></i> Riviera State 32/106</p>
                        <address>
                            <strong>Twitter, Inc.</strong><br>
                            795 Folsom Ave, Suite 600<br>
                            San Francisco, CA 94107<br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div>
            </div>

enter image description here

Upvotes: 1

Views: 1443

Answers (1)

Emil Vikstr&#246;m
Emil Vikstr&#246;m

Reputation: 91922

What you need is not really lazy loading but lazy rendering. You can easily keep the names and contact info for 10k clients as JS objects in RAM. Your problems will all be centered about the rendering of these elements, where you may see decreased performance around a couple of hundred cards.

Since your elements are so similar, just varying data, you can reuse already existing DOM elements. And even better, there are lots of libraries helping out with this already! React together with react-list have worked great for me so far. You only render the elements visible on screen right now, and when elements go out from view React makes sure you re-use those DOM elements.

With this kind of lazy rendering you can also expect filtering the list to be instant!

The downside is that you need to adapt a special workflow for React (writing your cards as React components, adding a compilation step for the .jsx files). There are lots of other libraries solving this problem (good search phrases include "js list view" and "infinite scroll list"). But I have found most of them to have fundamental flaws such as a bad public API, or not attaching to the global window scrollbar. react-list is the only one I have been happy with so far.

What you really should do is stop guessing. Generate a couple thousand (or whatever amount you expect) random records in your database using your favorite faker library.

Upvotes: 2

Related Questions