Chrome for Service Workerキャッシュファイルの時間統計を理解する

Question

Service Workerからキャッシュされたファイルについて、Chrome開発ツールのネットワークタブに何が表示されているのかを理解しようとしています。

キャッシュヒットがコンソールに記録されています（下記のサービスワーカーコードを参照）が表示されていますが、ネットワークタブでは通常のネットワーク負荷のように見えます。 230msはキャッシュヒットのために少し大きいようです。そして、値は通常、少量（次の負荷は217msと思われるかもしれません）で変化するので、私が思ったように、最初にキャッシュされた時のロード時間は表示されません。

サービスワーカーが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が持つサービス労働者の関与を解釈する方法についていくつかの背景を持っているの下にあるこの

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)); 
} 

で登録コード[ネットワーク]パネルのエントリ。

提供されたスクリーンショットは、サービス担当者から返された応答をネットワークに関係なく示しているため、おそらくキャッシュから直接送られたものです。 （スクリーンショットに含まれていない項目があり、隣に小さな歯車アイコンがある場合、それは別の問題です）。

[ネットワーク]パネルに表示される〜200msのタイミングは、要求を行ったページと応答を取得したページとの間に経過時間。サービスワーカーが関与する場合、ページのメインスレッドが他のタスクを実行している場合、リクエストの作成とレスポンスの処理が遅れることがあります。あなたの例では、あなたのSystem.import()呼び出しの結果として、メインスレッドがJavaScriptの束を評価して実行中であると仮定しているので、〜200msのオーバーヘッドがそれによって説明される可能性があります。

クロムチームは、要求/応答クリティカルパスからメインスレッドを除去する方法を評価され、それはhttps://bugs.chromium.org/p/chromium/issues/detail?id=443374