Дерево DOM остается в памяти, если вы удалите его с помощью обработчика щелчка на элементе внутри дерева

0

Пожалуйста, рассмотрите следующий пример:

<!DOCTYPE html>
<html>
<head>
    <title>Detached HTML</title>
    <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".summary").on("click", ".close", function() {
                $(".summary").remove();
            })
        })
    </script>
</head>
<body>
<div class="body">
    <div class="summary">
        <button class="close">Close</button>
    </div>
</div>
</body>
</html>

Теперь нажмите кнопку "Закрыть", а затем сделайте снимок "Куча" (я сделал это в браузере Chrome). Отфильтровать результаты по "Отдельно". Вы можете видеть, что удаленные элементы стали Detached DOM Tree, и они остаются из-за sizzle cache/property.

Ожидается, как это можно решить?

  • 0
    Вы имеете в виду на веб-инспектора? он хранит это в дереве элементов?
  • 0
    Инструменты разработчика -> Профили -> Сделать снимок кучи. Он остается в памяти, а не в дереве элементов. Я ожидаю и хочу, чтобы это был мусор.
Показать ещё 2 комментария
Теги:
google-chrome-devtools
google-chrome

1 ответ

3
Лучший ответ

Sizzle хранит внутренние тайники, поэтому вы все еще видите отдельные элементы после функции удаления.

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

Обратите внимание, что вы можете установить размер кеша, установив значение "$.expr.cacheLength" перед любым выбором dom, если вы хотите уменьшить размер кеша:

$.expr.cacheLength = 1;

Я прочитал исходный код sizzle, и вы не можете очистить кеш (это внутренние данные, и вы не можете получить к нему доступ), и вы не можете установить размер кеша в ноль, потому что когда вы читаете функцию, которая создает кеш:

function createCache() {
    var keys = [];

    function cache( key, value ) {
        // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
        if ( keys.push( key += " " ) > Expr.cacheLength ) {
            // Only keep the most recent entries
            delete cache[ keys.shift() ];
        }
        return (cache[ key ] = value);
    }
    return cache;
}

Последняя строка функции "cache":

return (cache[ key ] = value);

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

Вы также можете увидеть этот вопрос: jQuery/Sizzle checkContext утечка памяти

  • 0
    Спасибо. Я также видел эту часть кода и заметил, что cacheLength исправит это. Не был уверен, что это правильный способ сделать что-то.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню