Скорость страниц наших веб-сайтов важна. Более быстрый веб-сайт, скорее всего, улучшит коэффициент конверсии и рейтинг сайта в поисковых системах. Несмотря на то, что ваш веб-сайт имеет отличный пользовательский интерфейс, он все равно будет иметь меньшее значение, если ваш веб-сайт будет очень медленным. Walmart однажды упомянул, что каждое увеличение скорости их сайта на 1 секунду приводило к увеличению конверсии на 2%. Есть несколько таких примеров от многих технологических компаний, которые связывают веб-производительность с бизнес-производительностью. 💸

Если ваше приложение тормозит, и вы подозреваете, что это код, то, скорее всего, его замедляет HTML или манипуляции с DOM из вашего JS-кода. Даже в веб-приложениях, созданных с использованием самых современных фреймворков, таких как React, скорее всего, небезопасная обработка повторного рендеринга компонентов замедляет ваше приложение. 🐌

Изменение фактического DOM — дорогостоящая операция, и одна из причин, по которой современные фреймворки используют виртуальный DOM, заключается в том, чтобы сделать эти операции менее затратными за счет более эффективных циклов обнаружения изменений и алгоритмов сравнения. Фрагмент документа — это один из таких интерфейсов, который мы можем использовать в vanilla JS для повышения производительности наших операций DOM в приложении. Фрагмент документа является фрагментом объекта Document и не является частью фактического DOM. Эффективное использование фрагмента документа уменьшит взаимодействие с реальной моделью DOM, тем самым повысив производительность вашего приложения.

Давайте поговорим о цифрах… 🤖

Я выполнил тест jsbench и динамически добавил 10000 элементов списка с фрагментом документа и без него. Хорошо видно, насколько тот же код работает быстрее при использовании фрагмента документа.

Итак, в чем разница?

В первом подходе вы обращаетесь к фактическому объекту DOM (list) только один раз, чтобы добавить к нему фрагмент DOM, однако во втором фрагменте вы изменяете фактический объект DOM (list) 10 000 раз, что делает этот подход медленнее. 🐢

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

Использованная литература:

MDN — https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Совместимость с браузером — https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#browser_compatibility