SPA и динамический контент

chromedp spa-страницу начинает читать в момент, который кажется подходящим, но им не является. Navigate относится к действиям, которые всегда запускают переход и дожидаются загрузки страницы — для статического сайта этого достаточно, потому что вместе с загрузкой приезжает и контент. Для React или Vue событие загрузки означает другое: браузер получил документ и скачал скрипты. В этот момент разметки данных ещё не существует: она появится, когда скрипты запустятся, отправят запросы за данными, ответы вернутся и фреймворк прогонит их через виртуальный DOM. Задержка складывается из двух частей — сети и рендера — и ни одну из них программа не контролирует. Поэтому первое правило работы с фреймворковыми витринами звучит так: после Navigate ждут узел, которого на пустом каркасе не было. Контейнер карточек, шапка результатов, список позиций — что угодно, что рендерится только из данных. chromedp.WaitVisible по такому селектору возвращает управление, когда узел не просто найден, а имеет ненулевую рамку, то есть реально нарисован. Это уже половина дела, но не всё: контейнер может отрисоваться пустым, и тогда чтение даст ноль элементов без всякой ошибки. Оставшуюся половину закрывает предикат — условие на содержимое, а не на наличие узла.

chromedp.Poll строит из выражения предикат — в исходниках он оборачивается в return (выражение); — и передаёт браузеру на постоянную переоценку. Режимов три. Дефолтный raf исполняет предикат на каждом кадре requestAnimationFrame — самый тугой опрос, подходит для наблюдения за стилями и быстрыми изменениями. WithPollingInterval переключает на таймер с указанным интервалом — разумный выбор для данных, которые едут по сети и не меняются чаще раза в секунду. WithPollingMutation запускает переоценку на каждую мутацию DOM — идеален для лент, где элементы появляются событиями. Три опции настраивают ожидание: WithPollingTimeout ставит потолок, по умолчанию тридцать секунд, ноль отключает его совсем; при истечении действие возвращает ошибку waiting for function failed: timeout. Приёмник получает значение предиката, когда тот наконец вернул истину, — так одним действием можно и дождаться, и забрать результат; тип приёмника подбирается по форме значения: логическое выражение — nil или *bool, число — int, строка — string. Две границы стоит помнить заранее. Предикат не переживает навигацию: если страница переехала, Poll вернёт ошибку уничтоженного контекста исполнения, а не продолжит ждать. И предикат, который кидает исключение — например, обращается к свойству null-контейнера, — приносит эту ошибку сразу, не дожидаясь таймаута.

Динамический контент go-программа ждёт тем точнее, чем яснее, откуда берётся пауза. Первый источник — сеть: фреймворк отправляет запросы за данными после запуска, и ответы могут ехать секунды на тяжёлых витринах; этот этап — территория таймерного или интервального опроса. Второй — рендер: фреймворк собирает разметку постепенно, и на её месте часто стоит скелетон — серые прямоугольники, изображающие будущие карточки. Скелетон опасен тем, что он узел реальный: WaitVisible на нём проходит мгновенно, а данных внутри ноль, поэтому для витрин со скелетонами ожидание обязано смотреть на содержимое, а не на контейнер. Третий источник — гидрация: разметка уже в документе, а скрипты ещё навешивают поведение; для чтения текстов это не мешает, но клики до гидрации уходят в никуда. Режим опроса подбирается под источник: данные из сети — интервал, рост списка — мутации, стили и анимации — кадры. Когда источник неясен, начинают с мутаций: любой рендер фреймворка — это мутация DOM, и предикат сработает на первом же изменении, сделавшем условие истинным. Разобраться, куда уходит время, помогает DevTools на той же странице: длинная пауза перед первым XHR — это сеть или бэкенд, долгий рендер после ответа — фреймворк; тот же разбор работает и в обратную сторону — если данные отрисовались до вашего WaitVisible, все ожидания прошли мгновенно, и программа просто не заметила, что могла бы гонять.

Каталоги с бесконечным скроллом — самый частый SPA-сценарий после первого экрана. Схема программы: доехать до низа страницы прокруткой, дождаться новой порции узлов, повторить. Прокрутка делается Evaluate с window.scrollTo до document.body.scrollHeight, а ожидание порции — PollFunction с предикатом, сравнивающим текущее количество карточек с зафиксированным раньше. Конец ленты распознаётся по остановке роста: после очередного скролла счётчик не сдвинулся N попыток подряд — данные кончились, и цикл выходит. Здесь живёт одна тонкость виртуализированных списков: экономные фреймворки удаляют узлы, уехавшие за экран, поэтому собирать тексты «в конце, разом» нельзя — данные читают на каждом шаге цикла, пока они в DOM, либо берут их из состояния страницы, о чём ниже. Для витрин с кнопкой «показать ещё» всё проще: тот же цикл, но вместо скролла — Click по кнопке и предикат на рост счётчика. Если сайт позволяет, проверьте и альтернативу: у многих лент есть пагинация с адресами страниц, и она надёжнее скролла — этой теме целиком посвящён двадцать первый урок про таблицы и пагинации.

У SPA есть задняя дверь, мимо которой проходят половина парсеров: данные существуют до того, как стали разметкой. Фреймворк держит их в памяти — в состоянии приложения, в глобальных объектах, которые сайт кладёт для себя: window.__INITIAL_STATE__, объект конфигурации, кэш запросов. Evaluate из десятого урока читает это состояние напрямую и возвращает его в Go JSON-ом — без ожидания рендера, без скелетонов, одним обменом. Для тяжёлых витрин это не просто ускорение: сериализованное состояние стабильнее разметки, которую дизайнер завтра перестроит. Имена глобалов у фреймворков свои: __NEXT_DATA__ у Next.js, __NUXT__ у Nuxt, у самописных приложений чаще всего __INITIAL_STATE__ — подсмотреть их можно в консоли DevTools, начав печатать window.__ и глядя на автодополнение. Границы пути: состояние не документировано, его структура меняется без предупреждения, и у части сайтов оно не глобальное — тогда остаётся классический путь с ожиданием рендера. Второй короткий путь — вообще не ждать рендер, а слушать сеть: если данные едут XHR-ом, их можно перехватывать ответами до того, как фреймворк их распакует, — механика семнадцатого урока про перехват запросов. Выбирайте по задаче: разовый сбор — DOM с предикатом, промышленный обход — состояние или сеть. А для статических сайтов без скриптов всё это лишнее: смежный курс разбирает чистый HTTP-путь, который там дешевле.