MooTools’ Garbage Collection and IE’s ‘Stop this script running?’ error

I wrote a post before the weekend about some performance issues with MooTools, DHTML and AJAX, but having found the solution to a related problem this morning, I wanted to post a followup.

I’ve been working with a large, dynamically generated and AJAX populated table that features sorting, filtering and row highlighting, and was finding that my table took a long time to render, and was also very slow to close – that is, when I tried to close the window or refresh the page, there would be a delay when the browser would first hang for a few seconds. IE often (but not always) popped up the error/prompt Stop this script running?, and Firefox less often threw it’s Unresponsive Script warning.

I’d heard of MooTools’ garbage collection functions that reduced memory leakage, and figured that these were probably responsible. I then found Kevin Smith’s write up of his similar experience, and came to understand the problem. MooTools’ garbage collection takes time to clean up any element that has been extended. My table was executing the following code, effectively extending every table row in the table, resulting in some 500+ extended elements.

When it came to cleanup, this javascript processing took longer than IE’s configured script timeout, and thus prompted the warning.

To avoid this cleanup overhead, you’ll have to avoid extending the elements with MooTools’ extensive set of functions and instead extend the specific elements in question with the specific functions required.