Пожалуйста, рассмотрите следующий пример:
<!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.
Ожидается, как это можно решить?
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 утечка памяти