Прежде всего, это не то же самое, что этот вопрос, хотя вы можете подумать, что это на первый взгляд: Действительно ли использование фрагмента документа повышает производительность?
См .: этоjs fiddle https://jsperf.com/fragment-no-clone
Если вы создаете группу новых узлов в цикле с намерением добавить их в DOM, в моем уме гораздо быстрее сначала создать фрагмент, добавьте эти элементы кфрагмент, а затем добавить фрагмент в DOM после все настроено.(в отличие от создания элемента, добавьте в DOM, создайте следующий элемент, добавьте в DOM, один за другим)
Вот фрагмент кода, чтобы проиллюстрировать, что я имею в виду:
Использование фрагмента
let fragment = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
let element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
Не использование фрагмента
for (var i = 0; i < 100; i++) {
let element = document.createElement('div');
document.body.appendChild(element);
}
Причина, по которой я думаю, что фрагмент должен быть быстрее, заключается в том, чтомое понимание того, как работают браузеры: если я просто добавляю элементы один за другим сразу , то браузер должен сделать больше рисования и вычисления, тогда как если я настрою его аккуратно во фрагменте, а затем добавлювсе сразу, браузер должен только нарисовать / рассчитать один раз
ОДНАКО.
Я не вижу такого увеличения производительности в реальности.В тестировании Chrome / Safari на этой скрипке разница незначительна, и, хотя в Firefox есть небольшой толчок в пользу использования фрагмента, ничего особенного.
Так что же происходит под капотом?Мое понимание полностью испорчено?