Утечка памяти в $(document).click()

[generalov]

https://github.com/Dimox/jQueryFormStyler/blob/master/jquery.formstyler.js#L655
Для каждого элемента 'select' на странице styler регистрирует обработчик события 'click' в document.

Есть две проблемы:

1. Если на странице элементов 'select' достаточно много (на практике встретилась страница где их ~900), браузер начинает заметно тормозить при каждом клике.
2. После удаления элементов 'select' со страницы, обработчики остаются в памяти. Это критично для SPA, где элементы добавляются и удаляются динамически.

[Dimox]

Протестируйте, пожалуйста, версию с моими исправлениями - https://dl.dropboxusercontent.com/u/7312900/jquery.formstyler.js

Функцию onDocumentClick() я поместил внутри styler(), а не за ее пределами, как это у вас. Сделал так для того, чтобы подхватывалась опция onSelectClosed.

Хочу узнать, решается ли проблема в таком случае. Сам я не знаю, как протестировать на утечку.

[generalov]

Функцию onDocumentClick() я поместил внутри styler(),

м.. думаю так не получится. если я дважды на странице вызову $(selector).styler(opts), то opts подхватятся только от первого вызова, а по смыслу должны быть свои для каждого поля.

пусть на странице два формы -- #form1 и #form2, -- которые инициализируются раздельно:

// делай раз
$('input, select', '#form1').styler({});

// делай два. но этот onSelectClosed не подхватится, т.к. логика регистрации колбека 
// отработала в предыдущем вызове styler()
$('input, select', '#form2').styler({onSelectClosed: function() {}} ;.

как тестить утечку. можно добавить на страницу несколько select (в моем примере их 10 штук) и смотреть эффекты в js-консоли браузера. непропатченная версия ведет себя так:

>>> $._data(document, "events" ); // количество обработчиков click до вызова styler
Object {click: Array[1]}
>>> $('input, select').styler(); // вызывали 
>>> $._data(document, "events" ); // количество эвентов после применения styler
Object {click: Array[11]}
>>> $('input, select').remove();  // удалить элементы форм
Object {click: Array[11]}

если при удалении элементов количество связанных эвентов не уменьшается, значит есть утечка. jQuery корректно вычищает эвенты для элементов, которые удаляются и от них вглубь дерева. О том, что зарегистрировано снаружи дерева (на document в нашем случае) он ни чего не знает. эвенты не удаляет и возникает утечка.

полагаю, что правильнее будет связывать опции с элементами не через не замыкания, а сохранять их в .data() элементов.

[Dimox]

Тогда проблема остается нерешенной.

полагаю, что правильнее будет связывать опции с элементами не через не замыкания, а сохранять их в .data() элементов.

К сожалению, мне непонятно, о чем речь.

[generalov]

общие принципы работы с настройками и состоянием в jQuery плагинах описаны, например в http://www.websanova.com/blog/jquery/the-ultimate-guide-to-writing-jquery-plugins , начиная с параграфа 8. или вот тут http://acuriousanimal.com/blog/2013/02/25/things-i-learned-creating-a-jquery-plugin-part-ii/ , с самого начала. мне кажется, схема здравая и имеет право на жизнь.

смысл в том, чтобы запоминать настройки плагина прямо в DOM ноде, с которой они связаны, чтобы получив ссылку на ноду можно было извлечь и её настройки.

я имел ввиду то, что технически, в такой схеме настройки связываются с нодой в момент инстанцирования плагина при помощи метода jQuery .data, например так:

$(this).data('_styler', opts);

тогда при необходимости их можно извлекать от туда в любом удобном месте:

var selectbox = $('select').first(),
      opts = selectbox.data('_styler');

это могло бы решить проблему с получением доступа к настройкам из обработчиков типа onDocumentClick, вынесенным "за скобки".

если придерживаться предложенной в статьях схемы и развить рефакторинг дальше до:

 var plugin= new Styler($elem, settings);
 $elem.data('_styler', plugin);

можно вообще все методы вынести в отдельный класс, что сэкономит память. сейчас злополучная страница с 900 селектами при инициализации плагина с начальных 13M распухает до 130М, потом сдуваясь до 61M (сборщик мусора медленно подчищает замыкания). это я смотрю Memory на https://developer.chrome.com/devtools/docs/timeline .

[Dimox]

Для меня все это пока еще слишком сложно =(

[Dimox]

Наконец-то созрел для решения этой проблемы. Переделал структуру плагина (пока еще тестирую, в паблик не выложен). Теперь, как вы и писали, опции хранятся в .data и их можно считать с любого стилизованного элемента.

Задействовал вашу функцию onDocumentClick. Получаются такие результаты (стилизуемых элементов примерно 20 штук):

$._data(document, "events" );
undefined // количество обработчиков до вызова styler

$('input, select').styler(); // вызывали
$._data(document, "events" );
Object {click: Array[1]} // количество обработчиков после применения styler

$('input, select').remove(); // удалили элементы форм
$._data(document, "events" );
Object {click: Array[1]} // количество обработчиков после удаления

Можно ли теперь считать, что проблема с утечкой устранена?

[generalov]

пока еще тестирую, в паблик не выложен

нет))

[Dimox]

Не понял ответа.

[generalov]

я не могу проверить решен-ли вопрос, пока кода нет в паблике.

[Dimox]

Пожалуйста - https://dl.dropboxusercontent.com/u/7312900/jquery.formstyler.js

[Dimox]

@generalov, потестировали? Все ли в порядке?