Geek Answers Handbook

What can be done to improve IE8 performance for large datasets?

I have a page that displays tabular data ~ 300 pages. Firefox, Chrome, Safari everything works fine, but IE 7, 8 and 8 Compatibility see all the villains. It is idle for a few seconds when I try to scroll or press the page up / down button.

Page layout, smaller datasets, and other usability guidelines will not work for this page. Suppose I have absolutely no choice but to display all this data at once ... what can I do to configure it?

Data is downloaded via jQuery / Ajax, and this seems at least partially suspicious here, because when I created a test page to directly display the results, it is not as slow, but still not as fast as other browsers.

I have successfully used jQuery plugins such as SlickGrid to solve similar problems in the past, but for reasons that would take a long time to explain that they are not an option, even with micro-rendering capabilities of the templates. I am mostly concerned about what settings I can make to improve performance without redoing the entire page or introducing third-party solutions.

Is a simplified DOM make a big difference? Or does IE not process data received through JavaScript / Ajax?

+5
source share
6 answers

It's hard to see without any details or an example ... how do you build content? There are quite a few small catches with built-in tabular content: in particular, installing innerHTMLdirectly on <table>does not work in IE, so jQuery html()will probably do it in a long, slow way, if that's what you're using.

- , : table-layout: fixed <table>, width <col> s. ( width .)

, fixed , auto.

+4

innerHTML js/dom. Js IE, js/dom . html, . , jQuery id css. .

DOM IE . html, .

, , , . , , .

FYI, , IE, ajax dynatrace. . !

+4

, , IE innerHTML, DOM . . HTML JSON , , IE, , .

javascript IE , , IE, DOM - . , , .

0

jQuery.find() IE8. , IE8 - . , , .., .find() jQuery , script , , .

, .

0
   1. Avoid using script that going to make changes in DOM specially inside a loop.
        eg.

for ( var i = 0; i < rownodes.length; i++) {
  curRow = document.createElement("tr"); // this is a direct operation to DOM
  for(j=0 ;j <colLenth;j==){ 
     cell = document.createElement("td");
   }
}
// instead use..
var table = '<table>';
for ( var i = 0; i < rownodes.length; i++) {
   table = table + '<tr>'; // don't use DOM operation if not needed.
    for(j=0 ;j <colLenth;j==){   
      table = table + '<td> my text </td>';
    }
}
table = table + '</table>';// simple string operations will be much faster
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1]

  [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx
0
  • , . colgroup , ( ), .
 <table style="table-layout: fixed" width="600">
    <colgroup>
        <col width="100"><col width="300"><col width="200">
    </colgroup>
    <tr height="20">
        <td>ss</td>
        <td>ss</td>
        <td>ss</td>
    </tr>
    <tr></tr>
   ....
   ...
</table>

see the below link for detailed discription

http://msdn.microsoft.com/en-us/library/ie/ms533002 (v = vs .85) .aspx

-1
source

More articles:


All Articles