Размер DOM и стоимость стилей
В предыдущем уроке дополнительная программа создавала много строк. Даже после завершения её функции браузеру нужно оформить и разместить результат. Поэтому небольшой обработчик может сопровождаться дорогим следующим кадром. В этом уроке отделим размер данных, размер DOM и стоимость его обновления.
Новый advanced/list-lab содержит тысячу синтетических названий. Режим all показывает все строки, paged — порцию из пятидесяти. Это учебные размеры, а не количество реально показанных материалов ProfessorWeb. Исходники не запускались автором; фактическая стоимость на устройстве остаётся предметом ручного исследования. Наша цель — объяснить, какой слой работы меняется при ограничении представления.
Массив не равен документу
В обоих режимах модуль records.js создаёт один и тот же массив из тысячи объектов. У каждого есть номер и название. Но в полном режиме программа создаёт тысячу li со ссылками, а в постраничном — только пятьдесят. Значит, ограничение показа изменяет документ, сохраняя исходные данные.
Такое различие помогает локализовать причину. Если дорого само построение набора или вычисление фильтра, уменьшение числа видимых строк не отменит эту работу автоматически. Если основной интервал связан с оформлением и размещением результата, граница DOM может быть полезна. Сначала нужно различить эти участки в трассе.
У большой библиотеки также нет необходимости показывать каждую статью одним непрерывным списком на главной. Каталог и страницы разделов могут сохранять доступ к материалам через навигацию. Но удаление ссылок без альтернативного пути меняет функцию сайта. Поэтому ограничение представления должно сопровождаться понятным способом найти оставшиеся записи.
Что именно считать
Для исследования подготовленного списка можно получить число элементов внутри него:
const list = document.querySelector("#list");
console.table({
rows: list.children.length,
descendantElements: list.querySelectorAll("*").length,
documentElements: document.querySelectorAll("*").length
});В полном режиме ожидаются тысяча строк и две тысячи вложенных элементов: для каждой создаются li и a. В начальной постраничной порции — пятьдесят строк и сто вложенных элементов. Это следствие структуры исходников, а не измеренное время. Общий документ содержит дополнительные элементы оболочки, поэтому его число будет другим.
querySelectorAll возвращает элементы, соответствующие селектору; текстовые узлы не входят в эту величину. Полученная коллекция также представляет снимок выбранного поиска. Назначение метода описано в MDN: querySelectorAll. Не называйте такой счётчик полным объёмом памяти документа или всей стоимостью рендеринга.
Кроме количества важны глубина, оформление и область изменения. Тысяча простых строк и тысяча сложных карточек с изображениями предъявляют разные требования. Поэтому универсальный порог элементов не заменяет исследование конкретного интерфейса. Связь DOM и интерактивности разобрана в руководстве web.dev.
После JavaScript остаётся работа браузера
Функция show создаёт элементы и заменяет содержимое списка. Затем требуется применить оформление и разместить новые строки. В Performance найдите обработчик перехода к следующей порции и события, связанные с кадром результата. Сравнивайте работу программы и последующую стоимость отдельно, сохраняя одинаковый сценарий.
Если полный вариант обновляется дольше, ещё нужно объяснить, какой участок вырос. Создание множества объектов, пересчёт стилей и layout — разные причины. Один большой интервал вокруг нажатия не сообщает их доли автоматически. Используйте стек программы, операции браузера и кадры как части одной временной цепочки.
У list-lab ссылка внутри каждой строки ведёт к локальной карточке по известному номеру. Поэтому уменьшение DOM не удаляет сами данные. Однако кнопки порций меняют видимую область результата. После перехода должны оставаться понятные диапазон и общее число, иначе техническое ограничение превращается в непонятное исчезновение материалов.
Область изменения стилей
Когда меняется класс контейнера, некоторые правила требуют пересчёта связанных элементов. Цена зависит от того, какие свойства и узлы затронуты. Изменение геометрии может также потребовать нового размещения. Поэтому исследование селекторов нужно связывать с действительным действием, а не выбирать их длину как самостоятельную метрику скорости.
Рассмотрим отдельный ручной вариант: в копии добавляется переключение отступов у всех строк. Сначала проверьте, нужна ли эта операция пользователю и сохраняет ли она содержимое. Затем сравните её на полном и ограниченном наборе при одинаковом оформлении. Это позволяет проверить гипотезу о масштабе затронутого представления.
Не объединяйте такое изменение с переписыванием структуры каждой карточки и алгоритма фильтра. Иначе уменьшение работы нельзя будет связать с одним механизмом. Для диагностики полезен простой одинаковый список; сложность реального макета вводится позднее, когда исходная связь уже понятна.
Чтение геометрии и запись
Чередование изменения стиля и немедленного чтения размеров способно принуждать браузер актуализировать размещение. Общий механизм мы рассматривали в уроке о пути отображения. Здесь важен масштаб: повторение такого цикла на большом наборе может увеличивать цену взаимодействия.
Сначала выясните, нужна ли геометрия каждой строки. Для обычного перехода между порциями list-lab достаточно данных и индексов; измерять высоту каждой ссылки не требуется. Удаление ненужного чтения лучше выражает задачу, чем сложная перестановка вычислений ради сохранения бессмысленной операции.
Если размеры необходимы, определите зависимость чтения от записи. Иногда можно собрать известные значения до изменений, затем применить их группой. Иногда следующий размер действительно зависит от предыдущего действия. Механическое перемещение всех чтений вверх способно нарушить алгоритм. Причины принудительного layout описаны в руководстве web.dev по layout thrashing.
DocumentFragment используется в стенде для подготовки набора перед заменой. Он делает устройство обновления яснее, но не гарантирует фиксированного ускорения. Итоговые элементы всё равно становятся частью документа и требуют размещения. Поэтому нельзя оставить огромное дерево и считать одну операцию вставки доказательством завершённой оптимизации.
Сохранение результата ограниченного показа
При переходе к следующей порции сравните название первой и последней строки, диапазон и состояние кнопок. В подготовленных данных номера последовательные, поэтому ошибку границы легко заметить. Последняя порция должна содержать оставшиеся записи и не предлагать переход за конец. Эти ожидаемые состояния следует проверить читателю вручную.
Также проверьте действия со ссылкой и возврат к списку. Наш прототип после карточки ведёт к начальной постраничной странице; он не реализует восстановление номера порции в URL. Это ограничение учебного интерфейса. Для настоящего каталога сохранение страницы и позиции станет отдельным договором навигации, а не скрытой побочной задачей уменьшения DOM.
Меньше элементов не является самостоятельной пользовательской целью. Человеку нужен доступ к подходящему материалу, понятный порядок и работающая клавиатура. Если всё содержимое присутствует, но дорого размещается, могут рассматриваться другие средства. Если данные нужны лишь порциями, постраничный доступ часто проще объяснить, чем постоянное удаление строк при прокрутке.
Запишите отдельные величины: число исходных записей, число показанных строк, элементы внутри списка и участок работы в трассе. Затем назовите, что именно изменило ограничение показа. В следующем уроке сравним полный, постраничный и оконный варианты, уделив особое внимание поиску по документу и доступности виртуального списка.