Script Compilation Time
Script Compilation Time (время компиляции скрипта) - это метрика производительности веб-страницы, измеряющая время, которое браузер затрачивает на компиляцию и выполнение JavaScript-кода (JIT-компиляция) после загрузки скрипта, до того как код становится доступным для выполнения.
Метрика используется в веб-разработке и техническом SEO для диагностики проблем с производительностью, связанных с большим объёмом или сложностью JavaScript-кода. Например, браузер загружает 500 КБ JavaScript-файла; после загрузки начинается этап компиляции: код разбирается, анализируется, компилируется в машинный код. Если этот этап длится 300 мс, то Script Compilation Time составит 300 мс.
Script Compilation Time стала критически важной с усложнением фронтенд-приложений и введением метрики INP (Interaction to Next Paint) в Core Web Vitals, так как долгая компиляция откладывает выполнение кода и увеличивает задержки взаимодействия.
Кратко
[править]Script Compilation Time - это время, которое браузер тратит на парсинг, компиляцию и оптимизацию JavaScript-кода после его загрузки. Долгая компиляция задерживает выполнение скриптов и ухудшает INP.
Как работает Script Compilation Time
[править]Современные браузеры (V8 в Chrome, SpiderMonkey в Firefox) используют JIT (Just-In-Time) компиляцию для ускорения выполнения JavaScript. Процесс включает несколько этапов:
- Загрузка (Loading). Скрипт загружается по сети.
- Парсинг (Parsing). Исходный код разбирается в AST (абстрактное синтаксическое дерево).
- Компиляция (Compilation). AST преобразуется в байт-код (Ignition в V8).
- Оптимизация (Optimization). Часто выполняемые участки перекомпилируются в оптимизированный машинный код (TurboFan в V8).
- Выполнение (Execution). Скомпилированный код выполняется.
Script Compilation Time охватывает этапы 2-4 (парсинг, компиляцию, оптимизацию) и не включает загрузку по сети.
Что влияет на Script Compilation Time
[править]- Объём кода: чем больше кода, тем дольше компиляция.
- Сложность кода: глубокая вложенность, множество замыканий, динамические конструкции замедляют компиляцию.
- Количество скриптов: множество отдельных файлов увеличивают накладные расходы.
- Устройство пользователя: на слабых устройствах компиляция занимает больше времени.
Где используется
[править]| Сфера | Применение |
|---|---|
| Веб-производительность | Диагностика причин медленного взаимодействия |
| Core Web Vitals | Влияет на INP и FCP |
| JavaScript-оптимизация | Уменьшение времени компиляции через code splitting |
| Техническое SEO | Выявление страниц с блокирующим JS |
Сравнение этапов обработки скрипта
[править]| Этап | Описание | Влияние на пользователя |
|---|---|---|
| Script Loading Time | Загрузка файла по сети | Блокирует первую отрисовку, влияет на LCP |
| Script Compilation Time | Парсинг, компиляция, оптимизация | Блокирует выполнение, влияет на INP |
| Script Execution Time | Выполнение скомпилированного кода | Может блокировать UI, влияет на INP |
Как измерить Script Compilation Time
[править]- Chrome DevTools → Performance. На вкладке Summary в секции Scripting отображается общее время обработки JS.
- Performance API. Использование performance.measure() и performance.getEntriesByType('measure') для замеров.
- Lighthouse. В отчёте указывает на скрипты, блокирующие отрисовку.
- Web Vitals. Через JavaScript API можно отслеживать длительность выполнения долгих задач (Long Tasks), которые включают компиляцию.
Как оптимизировать
[править]| Метод | Описание |
|---|---|
| Уменьшение объёма кода | Code splitting, удаление неиспользуемого кода (tree shaking), минификация |
| Отложенная загрузка | Атрибуты async и defer для некритических скриптов
|
| Удаление неиспользуемых библиотек | Аудит зависимостей, замена тяжёлых библиотек на лёгкие альтернативы |
| Оптимизация для JIT | Упрощение кода, избегание антипаттернов, снижение глубины вложенности |
| Использование Web Workers | Вынос тяжёлых вычислений в фоновые потоки |
Часто задаваемые вопросы
[править]Чем отличается компиляция от выполнения?
[править]Компиляция - это подготовка кода к выполнению (перевод в машинные инструкции). Выполнение - это непосредственно работа этих инструкций. Долгая компиляция задерживает начало выполнения кода, увеличивая задержки взаимодействия.
Как сократить время компиляции?
[править]Необходимо уменьшить объём кода: удалять неиспользуемые функции, разбивать код на чанки (code splitting), загружать скрипты асинхронно (async/defer), удалять неиспользуемые библиотеки и заменять тяжёлые зависимости на лёгкие альтернативы.
Влияет ли время компиляции на SEO?
[править]Косвенно влияет. Долгая компиляция увеличивает INP (Interaction to Next Paint) и FCP (First Contentful Paint), которые входят в Core Web Vitals и являются факторами ранжирования Google.
Как измерить время компиляции конкретного скрипта?
[править]В Chrome DevTools на вкладке Performance можно включить опцию «Enable advanced paint instrumentation» и в таймлайне найти задачи с типом «Compile Script». Также можно использовать Performance API с маркерами до и после загрузки скрипта.
