Jquery: предварительная сборка в памяти

Question

Аналогично этому вопросу: JQuery: сборка HTML в «памяти», а не в DOM

У меня есть

var $container = $("#container");

У меня также есть:

jQuery.fn.somedomedits = function(expr) {
    return this.each(function() {
        var $self = $(this);
        $self.find(".adsf").append("<div></div>");
        // A lot more complex dom insertions like this
    });
};

Прямо сейчас я делаю:

$container.somedomedits().somemoredomedits();
// The somemoredomedits method is a similar plugin to the first one.

Просто сделав это, вы напрямую меняете DOM.

тогда я сделал:

var $editeddom = $container.somedomedits().somemoredomedits();
$containerwrapper.html($editeddom);

Это правильный способ сделать это?

Я не вижу улучшения скорости в Firebug / fox, не уверен, пойдет ли это на пользу другим браузерам.

Спасибо

Answer 1

Этот код медленнее

var $editeddom = $container.somedomedits().somemoredomedits();
$containerwrapper.html($editeddom);

потому что он делает то же самое, что и

$container.somedomedits().somemoredomedits();

плюс присвоить переменную и запустить один дополнительный метод (html()).

Это было бы быстрее, если бы вы создавали элементы на лету и вставляли их в дерево DOM после того, как вся структура была готова, но если вы извлекаете элементы из DOM с помощью селектора jQuery, вы получаете объект, который все еще " указывает на "ДОМ. Присвоение этой переменной не делает ее клонированной автоматически.

Вы можете клонировать этот объект, а затем запустить модификацию на клоне, и после того, как вы закончите, заменить содержимое, но вы должны сначала проверить, будет ли клонирование быстрее, чем то, что вы теряете, работая над DOM напрямую.

// clone part of DOM
// .clone(true) clones event handlers as well if you don't need it
// you can just run .clone()
var items = $(selector).clone(true);

// perform your complex operations
items.somedomedits().somemoredomedits();

// replace part of DOM with modified clones
$(selector).replaceWith(items);