Switch Content II - Memory Leak???

[jmctg]

1) Script Title: Switch Content II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...chcontent2.htm

3) Describe problem:

If you visit the test page I set up (http://teacher.immaculateconceptiona....org/test.html) in IE (6 or 7) You can see the problem. Firefox works fine. The actual page in question is dynamically created, using PHP / MySQL.

The problem appears to be a memory leak in the switch content script. Whenever I call more than one instance of the switch content script, or give it a lot of data (as in 50 - 100kb), it slows IE way down and uses up to 50% CPU.

As far as I can tell, the page doesn't get any faster when I cut down the number of records listed on the page. (cutting down the page size to 50kb total)

Any thougths?

Thanks,
Joe

[ddadmin]

I just checked your page in IE6 and IE7. The sluggishness in those browsers appear more to do with your large page size and "expensive" tags used on it then any memory leak issue with Switch Content. Even if I disable that script on your page, and IE, the page still bogs down my computer when loading it.

There are a few things you can probably do to make incremental improvements to the page in IE, but I doubt they'd be significant enough to no longer be an issue. Firstly, you have a lot of:

document.getElementById('boylson,robertalgebraiiaverage').innerHTML='  98.6%  ';

codes on your page. If they're not necessary, I'd remove them.

Secondly, you're using the same variable for every instance of Switch Content 2 on your page, in this case, faq:

<script type="text/javascript">
var faq=new switchicon("3", "div")
faq.setHeader('<img src="required/minus.gif" />', '<img src="required/plus.gif" />')
faq.collapsePrevious(true)
faq.setPersist(true)
faq.init()
</script>

This variable should be unique for every Switch Content instance on your page, so the second one should be:

<script type="text/javascript">
var faq2=new switchicon("3", "div")
faq2.setHeader('<img src="required/minus.gif" />', '<img src="required/plus.gif" />')
faq2.collapsePrevious(true)
faq2.setPersist(true)
faq2.init()
</script>

and so on. Thirdly, your use of nested tables is surely to slow things down in IE, as the browser will need to wait for everything inside the tables to be loaded before the page appears. If you switch to pure DIVs and CSS, that would make a big difference.

[jmctg]

Thanks for the info on the unique ids. Thats always good to know. And I tried it without all the document.innerHTML things, and it was still the same speed, and they are kinda neccessary...

I figured it came down to the tables and the sheer size of it all. But why the heck does it show correctly in Firefox, Opera, Netscape, and not in IE

I used to be a big IE believer, especially after IE7, but now???

[ddadmin]

I believe in Firefox, tables are rendered incrementally, while in IE, it's done all at once. But there are probably a lot of other subtities at play here as well. In terms of Switch Content script II, there isn't really any significant memory leak issue I can discern. Furthermore, IE7 fixes most memory leak issues that plagued IE6, and both browsers are having difficulty with your page.

I guess at this point you can either try to reduce the size of the page somehow, and/or trim the layout so it's more efficient (ie: get rid of the tables).

[jmctg]

Ok, thanks!

[Twey]

That page is simply ruddy huge. 5877 lines of HTML?! Plus scripts?! Plus images?! And the browsers have to error-correct it all too, since you're using XHTML and serving it with the wrong content-type.

[jmctg]

Yeha, well its dynamically generated, so they can get huge (this is an extreme case to over-emphasize the problem). I think the biggest problem is the tables, which I am working to fix. And technicallly, tables are a part of XHTML...

So I am working to eliminate the tables and replace them with div's, but it is a slow process

[Twey]

Yes, using tables for presentation does tend to result in a lot of bulk markup.

And technicallly, tables are a part of XHTML...

And? They're meant for tabular data, not layout. Besides, you're not actually using XHTML, you're using invalid HTML: you've sent it with the wrong content type for XHTML.