IE8 super slow rending a lot of DIVs w/o compatability mode

Question

For an app I need to write I need to send down a LOT of HTML (with the largest being close to 4MB worth).  Most of this data are various rows of mostly tabular data, but there are enough weird UI things required (things that really don't work well inside a table) that I had hoped to not use tables and instead use DIVs.

Just to test it, I mocked up some fake data with a few thousand DIV rows containing between 5 and 13 DIV cells.

In FF this renders correctly in 3-4 seconds.
In IE8 w/ compatability mode it renders in 3-4 seconds.
In IE8 in normal mode it takes several minutes.

The CPU is pegged and the IE window is unresponsive.  I haven't exactly timed it but I'd guess 4-8 minutes of full CPU.

Does anyone know what could cause this or how I could test to find out what part of the rendering is taking so long?

Here is my CSS and an example of some of my HTML:

 

<style>

 

.cell1

{

 

border: none; float: left; margin: 0; padding: 0; width: 85px;height:40px;

}

 

.FiveSplit1

{

 

border: none; float: left; margin: 0; padding: 0; width: 221px;height:40px;

}

 

.row1

{

 

background: none #ffffcc; border: solid #000000 1px; color: #000000;

 

margin: 0;

 

padding: 0; width: 1105px;height:40px;

}

 

.cell1end

{

 

border: none; float: right; margin: 0; padding: 0; width: 85px;height:40px;

}

</style>

 

 HTML:

<div style="border:solid thin black;width:1105px;">
          <span id="lblEverything">
              <div class="row1">
                <div class="FiveSplit1">HEADER 1</div>
                <div class="FiveSplit1">HEADER 2</div>
                <div class="FiveSplit1">HEADER 3</div>

                <div class="FiveSplit1">HEADER 4</div>
                <div class="FiveSplit1">HEADER 5</div>
              </div>
              <div class="row1">
                <div class="cell1">Cell 1</div>
                <div class="cell1">Cell 2</div>
                <div class="cell1">Cell 3</div>
                <div class="cell1">Cell 4</div>
                <div class="cell1">Cell 5</div>
                <div class="cell1">Cell 6</div>

                <div class="cell1">Cell 7</div>
                <div class="cell1">Cell 8</div>
                <div class="cell1">Cell 9</div>
                <div class="cell1">Cell 10</div>
                <div class="cell1">Cell 11</div>
                <div class="cell1">Cell 12</div>
                <div class="cell1end">Some text</div>
              </div>
<!-- throw in a bunch of repeats of the rows above here -->
</span>
</div>

 

 

 

Answer 1

Hi,

Please include your complete code source (including Doctype declarations, html,head and body blocks). Your sample code is useless without this.

To save us time also please validate your markup and layout. We are public volunteers and enthusiasts.

Regards.

---

Rob^_^

Answer 2

I valied my markup with http://validator.w3.org/check

Here is the entire HTML:
http://pastebin.ca/1653992

Answer 3

Hi,

Thaks for making your test case available...we are unpaid volunteers.


Yes indeed there is quite a difference in load times and memory maxes out in IE8 Standards mode.


I have tested it on both Browsers (IE and FX), but have not been able to speed it up in IE8 by very much.... your div elements were inline and the width of the cell divs (box model width) did not match the width of the bounding row divs.

Outline div elements using the Developer tool to see this.

This explains the difference in speed between IE6 and IE8 browser modes because of the difference in box models and the cells offsets.

One interesting test is to load the page with FX, then (using the Web Developer FX Addon) disable the Embeded Styles... FX chokes.... and takes just as long as IE8 to render the page.

I can only suggest that you change from an embedded style block to inline rules to avoid style rule mapping to class and id values.

Thats alot of work! Maybe tables will be the only choice.

You may glean some futher speed improvements from the results of this web search.

http://www.google.com/search?hl=en&q=maximum+number+of+elements+in+html+documents

Regards.

---

Rob^_^