17

Service Worker がキャッシュからのアイテムで応答するのを待つ時間が、期待するほど速くないことに気付きました。sw-precache私は両方とカスタム作成された Service Workerで同じ待ち時間を見てきました。

ServiceWorkerへのリクエスト

この待機時間の考えられる原因は何ですか?また、どのように短縮できますか?

fetchカスタム サービス ワーカーでの私のイベントは次のようになります。

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});
4

3 に答える 3

5

Chrome Dev Tools 内の Application -> Service Worker タブで「Update on reload」をチェックしていますか?

もしそうなら、これが問題かもしれないと思います.Service Workerコードをすべて再実行することになります.これは、sw-precacheリロードごとに.

于 2017-05-23T11:33:08.953 に答える
1

この奇妙な待ち時間の考えられる原因には答えられませんが、それを減らす方法は知っています。

event.respondWith() を使用して、Service Worker でフェッチ イベントをインターセプトできます。どういうわけか、私の場合、私のページが script タグを介してベンダーの JavaScript をロードする必要がある場合、Service Worker のデフォルトはすべてのフェッチ イベントをインターセプトして、このように cache-then-network (アセットの場合) または network-only (データのフェッチの場合) を実行します。 :

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
} else {
    fetchEvent.respondWith(fetch(fetchEvent.request));
}

最後のブロックは、ネットワークのみのリクエストを傍受しますが、これは行う必要がほとんどありません。この不必要なブロックは、どういうわけかブロッキング負荷を引き起こします (しかし、何がそれをブロックしているのかわかりません):

Serviceworker への長いリクエストの待機時間: ~400ms

そこで、不要なフェッチ インターセプトをインターセプトしないことにしました (もちろん、最後のブロックを削除することによって):

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
}

次に、私のページは、前述のファイルをロードするのに 16 ミリ秒しか必要としません。

これが役立つことを願っています

于 2017-06-23T06:25:48.837 に答える