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?

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?

• javascript
• jquery
• html
• twitter-bootstrap

• 3 You're loading 10Mb of text in to the DOM; it's going to be slow. If you want to speed it up then you need to not load so much data at once. You could use paging or lazy loading to load manageable chunks of data for the user to view before requesting the next chunk when required. – Rory McCrossan Commented May 24, 2016 at 9:24
• 1 check also you are not loading every time the user change of a tab the same data again and again – cralfaro Commented May 24, 2016 at 9:25
• First i can't use paging, second once it fully loaded, then why its still slow UI respose? It should behave normally when file has been fully loaded. – Siraj Hussain Commented May 24, 2016 at 9:26
• Yes, you are right, i need the same data again and again. – Siraj Hussain Commented May 24, 2016 at 9:27
• why every time changing tab,innerHTML will be set? – gu mingfeng Commented May 24, 2016 at 12:51

7 Answers 7

Since you are loading large files on tab change it's better to load them in background before use even makes any actions.

Specify iframe source in tag instead of loading it dynamically. This way data will be downloaded even before user clicks on tab.

Side note $(paneID).attr('data-src') can be changed to proper data attribute usage $(paneID).data('src')
$(paneID)[0].children[0].innerHTML = data I don't see where you set data variable
$(paneID)[0].children[0].innerHTML = data can be changed to jQuery: $(paneID).children().eq(0).html(data)
$(paneID + " iframe") can be changed to var pane = $(paneID); $('iframe', pane). Also it's good to cache your element as you are using it in multiple places.

The thing about Javascript is that it is single-threaded. So when you're trying this large operation, it blocks other browser events until this operation is done. There have been, however, recent developments in Javascript to allow for multi-threaded processes.

Option 1 - Web Workers

Looking at and leveraging Web Workers to offset the process so that it doesn't affect the responsiveness of your UI.

Option 2 - AJAX

Using AJAX to load in your HTML so that the process is asynchronous. That way, the browser can load in the background without affecting your UI.

$("#yourDiv").load("demo_test.html");

Both will solve your UI problem as it correctly allocates the browser resource to "another thread".

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.

I created a quick site replicating what you want to achieve. I used the default tab javascript provided by bootstrap. Please see the entire code below:

<!DOCTYPE html>
<html lang="en">
<head>

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<header></header>
<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">
            <iframe src="1.html" style="width:100%;height:600px"></iframe>
        </div>
        <div class="tab-pane" id="rn">
           <iframe src="2.html" style="width:100%;height:600px"></iframe>
        </div>
    </div>
</div>
</div>
</body>
<footer></footer>
</html>

The bootstrap script include all that is needed for the tabs to work, so your own javascript is not needed. The 1.html and 2.html are copies of the data you provided in the comments.

There are few things i think will improve your speed

• first minify the html document check this image you will reduce around 2mb
[1]: https://i.sstatic.net/85ULS.png
• second use ajax method to load the document like $("selector").load("href");

why dont you just gzip the content and also set the expiry headers in your .htaccess file

Enable expirations

ExpiresActive On

Default directive

ExpiresDefault "access plus 1 month"

My favicon

ExpiresByType image/x-icon "access plus 1 year"

Images

ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month"

CSS

ExpiresByType text/css "access plus 1 month"

Javascript

ExpiresByType application/javascript "access plus 1 year"

# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent

as it will keep the data in the cache and performace will be good i guess i am not too sure but just give it a try.. normally it happens because of low memory or ram.. to process the dom which take too much process..

Render Delays

After a page has been loaded some things that are trivial to code can cause dramatic performance implications because of the render cycle, in this case your tabbing API is conducting "layout" changes to your page by hiding and showing the appropriate tab. This requires a complete re-render of the tabs internal html structure, depending on the tabs content it can potentially be quite intensive.

See Rendering Performance for more information on the browsers rendering cycle.