CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Siraj Hussain
Siraj Hussain

Reputation: 874

UI response is too slow when attach large document

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?

Upvotes: 9

Views: 1934

Answers (7)

Alon
Alon

Reputation: 11905

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.

Upvotes: 3

42shadow42
42shadow42

Reputation: 405

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.

Upvotes: 0

Phillip Chan
Phillip Chan

Reputation: 993

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".

Upvotes: 3

Taj Khan
Taj Khan

Reputation: 589

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..

Upvotes: 2

ashutosh
ashutosh

Reputation: 79

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");

Upvotes: 2

Alex
Alex

Reputation: 1099

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.

Upvotes: 2

Justinas
Justinas

Reputation: 43479

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.

Upvotes: 3

Related Questions