Будет ли добавление элемента из потока вызвать перекомпоновку?

Question

У меня есть следующий код, который мне нужен, чтобы убедиться, что он чувствителен к производительности:

var $content = $(htmlString);

//Stop new element from triggering reflow? 
$content.css('display', 'none');

//add slide to DOM
$content.appendTo(options.els.$slider);

Я не могу вспомнить, запускается ли перекомпоновка при каких-либо манипуляциях с DOM или есть исключения, такие как добавление элемента out of flow в DOM. Вызовет ли приведенный выше код перекомпоновку options.els.$slider в потоке?

Answer 1

hide Метод (или метод CSS, как показывает обновленный вопрос) устанавливает display собственность на none:

display: none;

Что приведет к удалению элемента из обычного потока документов. Если требуется не удалять элемент из обычного потока документов, измените visibility Свойство CSS вместо этого:

$content.css('visibility', 'hidden');

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

Обратите внимание, что изменение видимости после добавления элемента в DOM приведет к перерисовке. События рисования можно профилировать с помощью ряда различных инструментов, в том числе инструментов разработчика Chrome на вкладке временной шкалы.

Answer 2

У каждого браузера есть свой метод определения этого, но обычно, если ваш код не вызывает изменения каких-либо других элементов, перекомпоновка не происходит. То, что вы добавляете DOM, не означает, что браузер должен перерисовывать страницу. Вы должны быть хорошими.