На этой неделе я был по колено в Javascript и в отображении элементов на странице, используя только ванильный Javascript. Это было действительно хорошее упражнение, потому что оно заставило меня задуматься о том, как все устроено, а также о плюсах и минусах использования различных реализаций при написании кода.
Одним из примеров этого является простое размещение элементов в DOM. Аббревиатура DOM означает объектную модель документа. DOM по существу составляет содержимое, отображаемое в браузере. Чтобы увидеть визуальное представление DOM, возвращаясь к тем временам, когда Нео видел Матрицу, вы можете просмотреть вкладку «Элементы» в инструментах разработчика Chrome.
В Windows вы можете получить это через F12. На Mac самый простой способ, который я нашел, — через меню: Вид → Разработчик → Инструменты разработчика.
Страница браузера может содержать большой набор HTML-элементов, и объем элементов, которые необходимо обновлять в любой момент времени, может быть разным.
Важным аспектом, который следует учитывать при обновлении DOM, является «перекомпоновка». Это процесс, при котором страница браузера перерисовывается. Поскольку это дорогостоящий процесс, важно помнить о количестве обращений к DOM и обновлении его во время данного процесса.
Например:
Если бы нас интересовало обновление раздела на странице, и в разделе был элемент таблицы с идентификатором «board», мы могли бы написать:
document.getElementById("доска");
Затем, когда мы хотели добавить строку или столбец в сетку, мы могли сделать добавление:
table.appendChild([новая строка]);
Однако это суммируется, поскольку каждое из них приводит к попаданию в DOM.
Каждое попадание также приводит к тому, что DOM пытается увидеть, какие другие элементы были затронуты этим изменением, что может вызвать дополнительные перекомпоновки.
Один из способов снизить эту стоимость — уменьшить количество обращений к DOM. Сначала создайте дочерние элементы, а затем, например, один раз добавьте к существующему элементу.
Можно использовать заполнитель для создания дочерних компонентов, а затем выполнить одно обновление DOM для существующего элемента. Пример этого ниже:
var фрагмент = document.createDocumentFragment();
Фрагмент документа является временным заполнителем. Он просто существует в памяти и может использоваться для построения «поддерева».
Можно было бы добавить все дочерние элементы к этому пустому объекту DocumentFragment. Затем добавьте этот объект к существующему элементу DOM, который вы изначально хотели обновить.
parent.appendChild(фрагмент);
Прелесть этой функции в том, что сам «фрагмент» не добавляется в DOM. Это просто заполнитель. Во время «добавления» дочерние элементы напрямую присоединяются к родительскому элементу, и все выглядит бесшовно. Этот метод не вызывает переформатирование страницы.
