Почему пустой работник сервиса значительно замедляет скорость загрузки страницы?

Question

Очень простая настройка.

1. Импорт служебного рабочего файла в теге <script> в индексе. html примерно так:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/app/static/js/service-worker.js', { scope: '/' });
    });
}

Сам работник службы пуст (1 строка):

console.log('Successfully Installed Service Worker.');

После запуска тестов скорости загрузки страницы я получаю интересные результаты:

                        DOM Interactive    DOM Complete       Load Event End     Number of page loads
no-service-worker       0.232              2.443              2.464              30
with-service-worker     0.343              2.484              2.502              30

Что дает? Как пустой работник службы замедляет загрузку страницы, потратив 120+ миллисекунд?

Answer 1

Некоторые браузеры будут оптимизировать вещи, обнаруживая, когда в сервисном работнике нет обработчика fetch, и не блокируют переходы при запуске сервисного работника. (Chrome довольно агрессивен в этом отношении.) Другие браузеры этого не делают. Вы не упоминаете, на каком браузере вы это тестируете, но я не особенно удивлен, что есть некоторое влияние.

Есть еще немного фона для этой топи c в этом разговоре .