As someone who has dealt with this very issue I'm pretty sure what the
problem is: IE.
Here's a simple test for you. Put your 1.6MB of html as a string in js (var
response = 'some big block of html') and then do this:
var start = new Date();
$('target').set('html', response);
var end = new Date();
alert(start - end);
That operation for 1.6MB of text is pretty shitty, ESPECIALLY for tables.
When you load a 1.6MB html file on its own, the browser renders it
procedurally, displaying it as it loads. The browser's CPU is pegged while
it's doing this, but it's still loading so you don't give it much thought.
When you fetch it via ajax, the browser has to parse the whole HTML response
in one single-threaded shot, and you notice it hanging.
The only real solution here is pagination (if you want to use HTML
responses). For data sets that large, I highly recommend that you consider
Dojo's data grid, which takes a JSON object and loads only the visible
portion of the table:
http://dojotoolkit.org/grids-charts
-a
On Wed, Aug 31, 2011 at 10:05 AM, hairbo <[email protected]> wrote:
> Hi all,
>
> Apologies for the lack of a jsfiddle, but I'm not sure I can demonstrate
> this issue there.
>
> I'm building a Mootools-based report interface that does all of its data
> submission and retrieval via Form.Request, and then displays the report
> results in the div specified in the "update" argument to Form.Request. The
> basic functionality works (nicely) in all browsers I've tested, but if I
> return a very large amount of data (e.g an HTML table with 2,000 records,
> spanning 64,000 lines of HTML, in a file that's 1.6MB large), IE7 and IE8
> hang up for a very long time before finally displaying the data, if at all.
> I have several users who are stuck on those browsers, and it's causing them
> a lot of pain. So far, my suggestions of "use Chrome, for Pete's sake" are
> failing, and so I'd like to see if there's something I can do about this.
>
> The code is below, but first some more detail about what I see. If I load
> the "data.htm" file by itself in IE7 or 8, it loads the entire 1.6MB
> document in about 3 seconds. Not lightening fast, but not awful for a file
> that large. Loading it in IE9 is slightly faster. Safari, Chrome and
> Firefox are faster still. (Opera? Who cares...)
>
> If I use Form.Request to grab the data, IE9, Firefox, Chrome and Safari all
> display the results in about the same amount of time: 3 seconds.
> Furthermore, the timestamps for "onSend" and "onComplete" (see below) are
> roughly 1 second apart in all those browsers. My guess is each browser gets
> the data back in 1 second, then takes 2 seconds to parse and display. So
> that all seems fine.
>
> In IE7/8, when I submit the form, I instantly see the "onSend" timestamp.
> Then, 18-20 seconds later, I see the "onComplete" timestamp, and then at
> last the data is displayed. Interestingly, but perhaps not relevant here,
> there is almost no lag between the time when the "onComplete" timestamp
> appears, and the data is displayed in the browser.
>
> So I have two questions about this. First, what's actually going on here?
> Is Mootools manually attaching each HTML element to the DOM via JS, or is
> it handing off that functionality to the browser (via "innerHTML" or
> something)? Second...is there anything I can do about this? My gut here
> says "no", because I know that IE prior to version 9 had a slow JS engine
> and/or some inefficiencies when manipulating the DOM itself. Unfortunately,
> answers like "return less data" won't really help me--some of our users
> really do want to look at 2,000 lines of data at once. Also, I *really*
> want to keep this model of retrieving all data via AJAX, since it leads to a
> very nice reporting interface, this issue aside.
>
> Any help is appreciated, and if more details are needed, please let me
> know.
>
> Thanks,
> Ben
>
>
> HTML:
> <form action="data.htm" method="post" id="dashboardform">
> <button type="submit">Submit</button>
> <input type="hidden" name="test" value="hi" />
> </form>
>
> <div id="results" style="border:1px solid black; padding: 3px;">
> </div>
>
>
> JS:
>
> window.addEvent('domready', function() {
> var gsubmit = new Form.Request (
> 'dashboardform',
> 'results',
> {resetForm: false,
> noCache: true,
> evalScripts: false,
> onSend: function(){console.log(new Date()); },
> onComplete: function(){console.log(new Date());}
> }
> )
> });
>
>
> SNIPPET OF HTML RETURNED BY DATA.HTM
>
> <table class="admintable" id="reportingtable">
> <thead>
> <tr>
> <th>#</th>
> <th>User</th>
> <th>Email</th>
> <th>PaymentID</th>
> <th>Status</th>
> <th>Product</th>
> <th>Date</th>
> <th>Amount</th>
> <th>Coupon</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td><a href="someRandomURL" target="_blank">someRandomUser</a></td>
> <td>SomeRandomEmail</td>
> <td>718353</td>
> <td>Success</td>
> <td>CF</td>
> <td>2010/01/01 9:56</td>
> <td style="text-align: right;">$30.00</td>
> <td> </td>
> </tr>
>
>
>
