UI response is too slow when attach large document

Question

I have a bootstrap tab control, That is pretty fine. On each tab i need to load an html document (large may be greater than 10MB). Everything works fine. but after loading data UI response is too slow even it takes 5,6 seconds to switch the tab. I don't want any delay while clicking. UI should responsive every time. I there any way to achieve this? This is what i have done so far...

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#dpa" data-toggle="tab">DPA</a></li>
            <li><a href="#rn" data-toggle="tab">Antwon</a></li>
        </ul>

        <div class="tab-content" style="width:100%;height:600px;">
            <div class="tab-pane active" id="home">
                <p>test</p>
            </div>
            <div class="tab-pane" id="dpa" data-src="../TabsData/data2.htm">
                <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
            <div class="tab-pane" id="rn" data-src="../TabsData/data2.htm">
               <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
        </div>
    </div>
</div>

//Javascript code

$('#myTabs').bind('shown.bs.tab', function (e) {
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if ($(paneID + " iframe").attr("src") == "") {
       $(paneID + " iframe").attr("src", src);
    }
});

NOTE: Okay it should response slow on loading as it has large data to load. But why slow once everything has been loaded?

Answer 1

1) Browser processes get slow when they overuse memory, because then the OS doesn't allocate for them more space in the RAM, but instead they have to keep some of the data in the hard-disk, which is a much slower hardware.

2) In your case it's not data but UI, which makes the browser need even more memory and more CPU, because the UI isn't evaluated once but over and over again all the time (this is the reason why when the browser is stuck, you see a blank page).

3) Your page is extremely large. I've never encountered such a large page. I've seen some very long pages, but yours "beats" them because of all the markup.

You have no choice but to hide the UI that the user doesn't see at the moment. It's OK that you bring all the data together, but you still need pagination or any other method for UI hiding.