Стоимость сторонних скриптов
Дополнительный виджет может занимать несколько строк подключения, но запускать большую цепочку работы. Он получает другие ресурсы, исполняет программу и меняет документ. Поэтому его стоимость не равна размеру первоначального файла. В этом уроке научимся связывать зависимость с конкретной фазой задержки и сохранять нужную функцию при изменении способа подключения.
В advanced/resource-lab используется только локальный mock-widget.js. Он создаёт 250 синтетических строк после нажатия кнопки. Это не настоящая реклама, аналитика или внешний провайдер; у стенда нет стороннего origin и аналитического endpoint. Исходники не выполнялись автором. Имитация нужна для понятной границы между загрузчиком и дополнительной программой.
Происхождение и ответственность
Сторонней называют зависимость, поведение которой поддерживается другим поставщиком. Это понятие не совпадает строго с сетевым origin. Чужой код может быть размещён на собственном домене, а собственное приложение — получать файлы с отдельного хоста. Поэтому расследование должно учитывать и владельца программы, и фактический путь доставки.
Для каждого подключения назовите назначение: комментарии, диаграмма, форма обратной связи или другое действие. Затем определите страницы и момент, когда оно нужно. Если виджет требуется только после открытия дополнительной панели, первоначальная загрузка на всех уроках получает иную цену. Небольшое подключение в общей оболочке умножается на количество разных сценариев.
Не начинайте с удаления всех зависимостей. Сначала выясните, какой результат они обеспечивают. Если после отключения пропала нужная форма, эксперимент измеряет другой продукт. Можно принять такое изменение, но оно требует явного функционального решения. Для технического сравнения лучше сохранить назначение и исследовать способ обнаружения, доставки или запуска.
Цепочка сети
В Network найдите начальный запрос, его origin и инициатора. Затем проследите запросы, появившиеся из подключённого скрипта. Один файл может быть лишь загрузчиком других модулей. Сравнение только его байтов пропускает остальную доставку. Практика исследования таких зависимостей описана в руководстве web.dev по стороннему JavaScript.
Запишите состояние кеша для всей существенной цепочки. Повторный переход может использовать часть ресурсов, а первая загрузка потребует другие обращения. Если заранее подготовить только загрузчик, связанные изображения или данные всё равно могут обнаруживаться поздно. Поэтому важно сохранить зависимость «инициатор → следующий ресурс», а не просто отсортировать список по размеру.
У нашего локального примера цепочка короткая: основной модуль загрузчика уже подключён, а mock-widget.js запрашивается после действия. Нет внешнего DNS, TLS или ответов провайдера. Следовательно, по этому стенду нельзя получить оценку сетевой стоимости настоящего стороннего сервиса. Он показывает договор включения дополнительной функции внутри документа.
Динамический импорт не устраняет работу
Обработчик кнопки использует import(). Он позволяет получить и обработать модуль по условию, возвращая обещание. Но последующий вызов функции по-прежнему выполняет свою работу. Асинхронная доставка не делает создание большого DOM фоновым. Семантика операции приведена в MDN: dynamic import.
Главный фрагмент загрузчика выглядит так. В полном файле вокруг него находятся состояние кнопки и обработка ошибки:
const { mount } = await import("./mock-widget.js");
mount(document.querySelector("#widget"));Адрес относительный и указывает на подготовленный локальный файл. После успешного импорта получаем экспортированную функцию. Её код создаёт список и заменяет содержимое контейнера. Время ожидания модуля и время последующего размещения списка относятся к разным участкам пользовательской реакции. Их нужно исследовать отдельно.
Повторный импорт того же модуля в одном окружении имеет особенности кеширования модульной системы. Поэтому два последовательных вызова не обязательно воспроизводят первоначальную доставку и инициализацию. В нашем интерфейсе после успеха кнопка остаётся отключённой. Для нового сценария читатель открывает новый документ и отдельно задаёт состояние HTTP-кеша, вместо попытки выдать второй вызов за холодную загрузку.
Атрибуция исполнения
Запишите действие кнопки в Performance. Найдите работу загрузчика, функцию mount и последующее размещение. В подробном представлении можно исследовать стек, URL исходников и накопленную стоимость функций. Устройство этих представлений описано в документации Chrome Performance.
Не приписывайте всякую операцию после загрузки модуля исключительно ему. Сам загрузчик меняет сообщение, браузер применяет стили, а соседняя программа может работать одновременно. Причинная запись должна показать вызов или другую связь. Совпадение по времени помогает сформулировать гипотезу, но ещё не заменяет проверку одним независимым изменением.
У настоящего внешнего кода часть подробных сведений может быть ограничена границами происхождения и возможностями инструмента. Отдельный сигнал длинной задачи не является точным профилем каждой функции поставщика. Это ограничение уже видно в назначении Long Tasks API. Если атрибуция неполна, сохраните неизвестную часть явно.
Выбор момента включения
Для сравнения можно подготовить отдельную копию с ранним получением модуля, сохранив вызов mount по той же кнопке. Тогда меняется путь доставки, а результат действия остаётся одинаковым. Исследуйте первоначальную конкуренцию ресурсов и отклик после кнопки. Улучшение одного момента может оплачиваться большей первоначальной передачей.
Другой вариант — автоматическое включение виджета при загрузке документа. Это уже изменение сценария: дополнительные строки появятся без действия человека. Его нельзя напрямую сравнить с кнопкой как одну техническую перестановку. Сначала определите, нужны ли эти строки при каждом посещении, затем оценивайте цену выбранного поведения.
Атрибуты async и defer у обычных скриптов влияют на планирование, но не отменяют стоимость исполнения. Для модулей действуют свои правила подключения. Не выбирайте одно слово как универсальное ускорение внешней функции. Сохраните корректный порядок зависимостей и исследуйте конкретный момент работы; свойства подключения описаны в MDN: script.
Размеры, ошибка и обязательная функция
У контейнера стенда есть минимальная высота, но 250 строк намного выше короткого сообщения. Это намеренная граница имитации, а не готовый договор рекламного блока. Если такой список вставляется рядом с читаемым текстом, исследуйте движение содержимого. Стоимость внешней зависимости включает также последствия её размера и оформления.
При недоступном модуле загрузчик показывает ошибку и разрешает повторную попытку. Основная статья остаётся читаемой. Успешная быстрая страница без нужного виджета не равна корректному результату; ошибка должна быть различима. В ручной локальной копии можно временно изменить URL и проверить этот сценарий отдельно от измерения успешной доставки.
В реальном подключении договор размеров и состояния следует согласовать с возможностями поставщика. Например, iframe имеет другое устройство взаимодействия и изоляции, но не становится бесплатным ресурсом. Наш пример не воспроизводит все такие условия. Не переносите результаты локальной функции на внешний сервис без отдельного исследования его цепочки.
Сохраните карточку зависимости: функция для читателя, владелец, фактический origin, дополнительные ресурсы, участок исполнения и план сравнения. Такой результат помогает обосновать решение о подключении. В следующем уроке исследуем одну из возможных последующих цен: сколько элементов программа создаёт и какая работа требуется для их стилей и размещения.