Page MenuHomePhabricator

jquery.makeCollapsible causes memory leaks in all major browsers
Closed, ResolvedPublic

Description

Author: pecoes

Description:
I do not know the full scope of this bug, but it occurs reproduceably on Special:RecentChanges. Below is some reproduce code. It's meant to be tested via the browser console. As you will see the jQuery cache grows with each iteration. As there tends to be a lot more than one collapsible section on that page, the leakage tends to become quite drastic over time, if you run a script that continuously refreshes the page like this one:

http://dev.wikia.com/wiki/AjaxRC

(function test (t) {

$('#mw-content-text').empty();
 
$(
  '<table class="mw-collapsible mw-collapsed mw-enhanced-rc">\
    <tbody>\
      <tr>\
        <td>\
          <span class="mw-collapsible-toggle">\
            <span class="mw-rc-openarrow">\
              <a href="#" title="Show details (requires JavaScript)">\
                <img src="http://slot1.images.wikia.nocookie.net/__cb62189/common/skins/common/images/Arr_r.png" width="12" height="12" alt="+" title="Show details (requires JavaScript)">\
              </a>\
            </span>\
            <span class="mw-rc-closearrow">\
              <a href="#" title="Hide details">\
                <img src="http://slot1.images.wikia.nocookie.net/__cb62189/common/skins/common/images/Arr_d.png" width="12" height="12" alt="-" title="Hide details">\
              </a>\
            </span>\
          </span>\
        </td>\
        <td>\
          &nbsp;&nbsp;Test&nbsp;' + t + '&nbsp;&nbsp;</td>\
        <td>\
          <button>reload</button>\
        </td>\
      </tr>\
      <tr><td colspan="3">hidden line</td></tr>\
      <tr><td colspan="3">hidden line</td></tr>\
      <tr><td colspan="3">hidden line</td></tr>\
    </tbody>\
  </table>'
)
.appendTo('#mw-content-text')
.makeCollapsible()
.find('button')
.click(function () {
    var c = 0, i;
    for (i in jQuery.cache) c++;
    console.log('Test', t, 'jQuery.cache', c);
    test(t + 1);
});

}(1));


Version: unspecified
Severity: normal

Details

Reference
bz49626

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:53 AM
bzimport added a project: MediaWiki-JavaScript.
bzimport set Reference to bz49626.
bzimport added a subscriber: Unknown Object (MLST).

Confirming. This seems to be caused by unconditionally creating the default toggler with its event handler even if it's not actually inserted into the document (custom togglers are used, like in your example).

Commenting out lines 292-295 in /resources/jquery/jquery.makeCollapsible.js in the current MW master fixes the leak (although obviously breaks the code). It should be a reasonably easy fix to not create the toggler if not needed.

Related URL: https://gerrit.wikimedia.org/r/68949 (Gerrit Change I0c92e5c28a66c6a6469e107593dc9b6d3baa8a10)

Change 68949 merged by TheDJ:
jquery.makeCollapsible: fix jQuery memory leak

https://gerrit.wikimedia.org/r/68949