Понимание статистики времени в Chrome для рабочих рабочих столов кэшированных файлов

Question

Я пытаюсь понять, что вкладка сети в инструментах Chrome dev сообщает мне о кэшированных файлах, поступающих от Service Worker.

Я вижу, что кэш попал в консоль (см. Ниже код сервисного рабочего), но вкладка сети делает его похожим на обычную сетевую нагрузку. 230ms кажется немного большим для кеша. И значение обычно изменяется на небольшую величину (следующая загрузка может быть, скажем, 217 мс), поэтому он не показывает мне время загрузки, когда оно было сначала кэшировано, как я и думал.

Код регистрации работника службы это

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('swRoot.js').then(() => { 
     console.log('registered'); 

     System.import('react'); 
     System.import('react-dom'); 
     System.import('a').then(({ a }) => console.log('value from a', a)); 
    }, err => console.log(err)); 
} 

Полнота swRoot.js находится ниже

self.addEventListener('install', function(event) { 
    console.log('INSTALLED'); 

    console.log('ADDING CACHE FILES'); 
    event.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       '/react-redux/node_modules/react/dist/react-with-addons.js', 
       '/react-redux/node_modules/react-dom/dist/react-dom.js', 
       '/react-redux/a.js' 
      ]).then(function(){ console.log('cache filling success'); }).catch(function(){ console.log('cache filling failure') }); 
     }) 
    ); 
}); 

console.log('ADDING FETCH at root level'); 
self.addEventListener('fetch', function(event) { 
    event.respondWith(
     caches.match(event.request) 
      .then(function(response) { 
       // Cache hit - return response 
       if (response) { 
        console.log('cache hit', event.request); 
        return response; 
       } 
       return fetch(event.request); 
      }) 
    ); 
}); 


self.addEventListener('activate', function(event) { 
    console.log('ACTIVATE'); 
}); 

Answer 1

Это previous answer имеет некоторый фон о том, как интерпретировать участие работник службы с на панели «Сеть».

Приведенный снимок экрана показывает ответ, полученный от рабочего, без участия в сети, поэтому он предположительно поступает непосредственно из кеша. (Если в вашем скриншоте была еще одна запись, а рядом с ней была маленькая шестнадцатеричная иконка), то это будет другое дело.)

Время в 200 мс, отображаемое на панели «Сеть», отражает общее количество времени, которое прошедшего между страницей, на которой выполняется запрос, и страница получает ответ. Когда задействован сервисный работник, как выполнение запроса, так и обработка ответа могут быть отложены, если основной поток страницы выполняет другие задачи. В вашем примере я предполагаю, что основной поток занят оценкой и выполнением кучи JavaScript в результате ваших вызовов System.import(), поэтому, вероятно, это объяснит ~ 200 мс накладных расходов.

Команда Chromium оценивает способы удаления основной поток из запроса/ответа критического пути, и это отслеживается на https://bugs.chromium.org/p/chromium/issues/detail?id=443374