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>
