Будет ли добавление элемента из потока вызвать перекомпоновку?
У меня есть следующий код, который мне нужен, чтобы убедиться, что он чувствителен к производительности:
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
в потоке?
2 ответа
hide
Метод (или метод CSS, как показывает обновленный вопрос) устанавливает display
собственность на none
:
display: none;
Что приведет к удалению элемента из обычного потока документов. Если требуется не удалять элемент из обычного потока документов, измените visibility
Свойство CSS вместо этого:
$content.css('visibility', 'hidden');
Настройка display
свойство перед добавлением его в DOM, однако, не должно вызывать перекомпоновку.
Обратите внимание, что изменение видимости после добавления элемента в DOM приведет к перерисовке. События рисования можно профилировать с помощью ряда различных инструментов, в том числе инструментов разработчика Chrome на вкладке временной шкалы.
У каждого браузера есть свой метод определения этого, но обычно, если ваш код не вызывает изменения каких-либо других элементов, перекомпоновка не происходит. То, что вы добавляете DOM, не означает, что браузер должен перерисовывать страницу. Вы должны быть хорошими.