Thickbox Memory Usage
Introduction
This test has built to measure the memory usage of ThickBox version 2.1.
It is using a very simple XHTML modell with a function, that is simulating 50 clicks on a thickbox-image.
$(document).ready(function() {
$("#autostart").click(function() {
autopop(50);
return false;
})
});
function autopop(i) {
TB_remove();
$("#startme").click();
if (i > 0) {
i--;
window.setTimeout("autopop(" + i + ")", 35);
}
}
Each test is started in a new instance of Microsoft Internet Explorer 6.
The underlying operating system is a full patched Windows XP Professional SP2.
Memory consumption has been measured using the integrated Task-Manager.
Altough i don't believe this very exact, it's capable of showing a significant trend.
The measure is taken immediatly after the testrun. No-refresh or something like that.
If you would refresh or open another page, the memory will be freed again.
You can find all the results in this simple textfile.
Test results
Test 1: No modifications
This test is using the unmodified ThickBox Javascript in Version 2.1.
Testfiles
Memory Usage
| # |
start |
end |
| 1 |
17.200K |
202.500K |
| 2 |
17.000K |
214.600K |
| 3 |
17.000K |
201.900K |
| 4 |
17.000K |
202.400K |
| 5 |
17.000K |
203.600K |
As you can see, the memory consumption is getting higher on each click.
On my computer it gets finally higher than 200.000K which would be really bad on computers with less Memory.
Altough this memory gets free on a page reload, i think this is still bad, when you are visiting large galleries with many images.
Test 2: Unload the Events and empty the TB_window element
In this test i tried to unload the TB_overlay onclick and the window onscroll event, because i hoped this would reduce some closures.
Additonally i emptied the TB_window before removing it.
Testfiles
Memory Usage
| # |
start |
end |
| 1 |
17.000K |
152.400K |
| 2 |
~17.000K |
158.200K |
| 3 |
~17.000K |
166.200K |
| 4 |
~17.000K |
152.300K |
| 5 |
~17.000K |
161.100K |
Altough this brought a little improvement, the overall memory usage is still to high. But it becomes clear, there is some place for improvements.
Test 3: Disabled TB_overlay click event
Cause i blamed the TB_overlay onlick event for the biggest closure, i just tried to disable it at all.
Testfiles
Memory Usage
| # |
start |
end |
| 1 |
~17.000K |
29.200K |
| 2 |
~17.000K |
29.400K |
| 3 |
~17.000K |
27.100K |
| 4 |
~17.000K |
29.300K |
| 5 |
~17.000K |
29.300K |
My assumption has been proved as true. The onclick event is creating most of the closures and therefore the memory loss.
Test 4: Permanant single creation of TB_overlay and TB_HideSelect
Because i liked the idea of the overlay onclick i tried to create the TB_Overlay + Event on init.
Instead of creating and removing them on each call, they are now just "hidden" (display: none).
Testfiles
Memory Usage
| # |
start |
end |
| 1 |
21.000K |
29.200K |
| 2 |
21.000K |
32.800K |
| 3 |
21.000K |
31.700K |
| 4 |
21.000K |
32.800K |
| 5 |
21.000K |
29.100K |
As you can see, the memory usage is slightly higher than in the previous test -
i am not sure, but it has to come from the additional Elements and the Event.
The memory consumption during usage is nearly the same as before and it is not multiplied by each further click.
So even big galleries should not be really problematic.
Conclusion
As you can see, there goes a really high memory consumption using the unmodified script. As i mentioned before, there is no real memory
leak in the script, because the memory will be freed on reload. But nevertheless i think it could be really problematic for large
galleries on computers with less memory. If im not totally wrong, this high consumption has to do with Javascript closures and IEs incapability
of collect those as "garbage". Firefox didn't show up any abnormal memory usage and i couldn't test if IE 7 works better on this. But i guess,
this behavior remains. Maybe anyone could test this for me?
My proposal is to modify the ThickBox Javascript in a similar way i did in Test 4. This patch can not be applied directly, because i just tested
on images. The ajax, inline and iframe approaches could need further modifications. I hope this tests can help to improve the quality of the
ThickBox script.
Contact