パフォーマンス最適化小冊子-プログラム可能キャッシュ:Service Workers

9961 ワード

javascript 先端パフォーマンス最適化 service-worker pwa

Service Workersは、単にPWA、PC端末もその強大な機能を利用していくつかの面白い最適化を実現することができます.ネットワークの中にService Workersについて紹介されたいい文章がたくさんあります.Service Workersの詳細な教程.
いくつかの注意点
Service workerは、指定されたソースおよび経路に登録されたイベント駆動ウォーカーである.
ウォーカーコンテキストで動作していますが、DOMにはアクセスできません.駆動アプリケーションの主JavaScriptスレッドに対して、他のスレッドで実行されていますので、ブロックが発生しません.
それはJavaScriptを採用して関連しているページあるいはウェブサイトを制御して、アクセスと資源の要求を遮断して修正して、きめ細かい粒度で資源をキャッシュします.特定のシナリオ(最も一般的な場合はネットワークが利用できない)でのアプリケーションの表現を完全に制御することができます.
完全非同期API(XHRやlocal Strageなど)はService workerでは使用できないように設計されています.
すでにserivce workerがサポートされているブラウザのバージョンでは、多くの特性がデフォルトで開かれていません.
ブラウザのペアを理解する
serivceワーカーのサポート.
コード例が現在のバージョンのブラウザでどのように正常に動作しないかを発見したら、ブラウザの関連設定を開く必要があります.
また、安全のためにService WorkersはHTTPSの下で運行しなければならないということに注意したい.現地開発のために、localhostもブラウザから安全源として認識されている.
Service Workerを登録します.ServiceWorkerContainer.register()関数を使用してサイトのservice workerを登録する(service sorkerはJavaScriptスクリプトだけ).
この文書のurlは対である.originは、参照されたJSファイルに対してではなく、.



if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/serviceworker.js")
    .then(function(reg) {
      if(reg.installing) {
        console.log('Service worker installing');
      } else if(reg.waiting) {
        console.log('Service worker installed');
      } else if(reg.active) {
        console.log('Service worker active');
      }
    })
    .catch(console.error);
}

キャッシュリストの設定Service Workerに登録した後、ブラウザはあなたのページまたはサイトのためにインストールしてアクティブにすることを試みる.installイベントは登録完了後にトリガされ、installイベントは一般的にブラウザのキャッシュ機能を満たすために使用される.
この目的を達成するために、Service Workerの新しいフラグを使用した記憶API-Cache、service worker上のグローバルオブジェクトは、ネットワーク応答で送信されたリソースを記憶し、それらの要求に応じてkeyを生成することができる.
Cacheインターフェースはworkersのように、windowの役割領域に露出しています.service workerの標準に定義されていますが、service workerに協力して使う必要はありません.

// serviceworker.js
const cacheName = 'my-cache';
// self    worker     ，         
self.addEventListener('install', event => {
  //               
  const filesToCache = [
    '/',
    '/static/css/reset.css',
    '/static/css/css-loader.css',
    '/static/css/create-version.css',
    '/static/css/bootstrap-grid.css',
    '/static/css/bootstrap.css',
    '/static/js/css-animations.js',
    '/static/js/vue.js',
  ];
  event.waitUntil(
    // caches   CacheStorage     ：caches instanceof CacheStorage -> true
    //    CacheStorage.open(cacheName)      Cache   
    caches.open(cacheName)
    //      URL         
    .then(cache => cache.addAll(filesToCache))
    .catch(e => console.error(e))
  );
});

ここでは、installイベントモニターを追加し、次いでイベントにExtensdable Event.wait Unitil()方法を接続した.waitUntil()は、サービスワーカーがwaitUntil()の中のコードが実行される前にインストールされないようにするために使用されています.
もしcaches.open(cacheName)rejected,インストールが失敗します.workerは、何もしない(例えば、URLのスペルミス).
注意:Service Workerスレッドの最初の登録／起動ページは、再度ローディングする必要があります.Service Workerスレッドは、インストールが完了してアクティブ状態になる前にfetchイベントおよびpushイベントを受信しない.
fetchで要求をブロックする
サイトリソースは現在キャッシュされていますが、またService Workerにこれらのキャッシュコンテンツを使って何をするかを教える必要があります.fetch APIを介してブロックすることができます.

//fetch       ，                  
self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request)
        .then(response => response ? response : fetch(e.request))
    )
});

caches.match(event.request)は、ネットワーク要求のリソースとcacheで取得可能なリソースとをマッチングさせ、キャッシュに対応するリソースがあるかどうかを確認することができる.このマッチングは、通常のurlによって要求されるように、vary headerおよびhttpによって行われる.
表示
Fetch API documentationは、RequestおよびReponseオブジェクトに関するより多くの情報を知る.catchリソースに一致すると、caches.match(event.request) はresolveになり、thenのフィードバックでresponseに直接に戻ることができる.

caches.match(e.request)
  .then(response => response)

リソースにマッチしていない場合は、caches.match(event.request) はrejectを使用してデフォルトのネットワーク要求をブラウザに直接に伝えることができる.(ネットワークが利用可能な場合は、直接にサーバにリソースを要求することができることを意味する)

caches.match(e.request)
  .then(response => response ? response : fetch(e.request))

キャッシュを更新
キャッシュ・リストを更新し、fetchイベントによって処理することができ、本明細書の判例コードは実現されていない.clients.claim()を使用してページを制御権取得するだけで、その後にページを開くとバージョン更新されたキャッシュが使用される.

self.addEventListener('activate', e => self.clients.claim());

は、古いキャッシュをどのように削除し、キャッシュを更新するかについて、MDN教程を推薦する.

は、activateプロジェクトにおいてSPAを導入することによってURLの変化を引き起こすことができるということについて、この場合、hashのキャッシュをどのように更新するかを推奨する.

最適化後の効果
Chromeは一つありますService Workerは、現在のデバイスにおいてアクティブで記憶されているserviceワーカーを示すことができる.もう一つありますchrome://inspect/#service-workersは、ウォーカーのプロセスを開始/停止/調整することができます.chrome://serviceworker-internalsのChrome devToolsを通して、現在のサービス作業スレッドの動作状況を確認することができます.
付Application Tab完全コード:


const cacheName = 'my-cache';
// self.clients.claim()        ,                   
self.addEventListener('activate', e => self.clients.claim());

self.addEventListener('install', event => {
   //               
  const filesToCache = [
    '/',
    '/static/css/reset.css',
    '/static/css/css-loader.css',
    '/static/css/create-version.css',
    '/static/css/bootstrap-grid.css',
    '/static/css/bootstrap.css',
    '/static/js/css-animations.js',
    '/static/js/vue.js',
  ];
  
  event.waitUntil(
    // caches   CacheStorage     ：caches instanceof CacheStorage -> true
    //    CacheStorage.open(cacheName)      Cache   
    caches.open(cacheName)
    //   filesToCache （    URL   ）      
    .then(cache => cache.addAll(filesToCache))
    .catch(e => console.error(e))
  );
});
// fetch     
self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request)
        .then(response => {
         return  response ? response : fetch(e.request)
        })
    )
});

拡張読書のオススメ:サービスワーカーのモバイル端末H 5項目への適用.
同じシリーズの記事:

この文章

性能最適化小冊子-非同期スタック追跡：どうしてawaitがPromiseに勝るのですか？

性能最適化小冊子-分類構築：良いwebpack hashを利用する