UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web高速化】NoState Prefetch

事前レンダリングを調べているとNoState Prefetchというワードにあたった

2018年の記事によると、当時?は事前レンダリングにパフォーマンス面で問題があったようで、NoState PrefetchとはChromeがその問題を解決するために考えた新しいメカニズムらしい developers.google.com

Chrome 63以降にはもう仕組みとして入っているので、下の機能を使った場合はNoState Prefetchが使われているとのこと

<link rel="prerender">

NoState Prefetchがどういうものかを簡単にまとめる

  • 最大45MiBのメモリのみを使用する
    ※事前レンダリングは通常100MiBのメモリを消費し、メモリ消費は150MiBに制限される
    この高いメモリ消費により、ローエンド(つまり、512MB未満のRAM)デバイスには適していない

  • 事前にリソースをフェッチするだけで、コードを実行したり、ページをレンダリングしたりしない
    ※事前レンダリングは、音楽やビデオの再生などやステートフルアクション(セッションやローカルストレージの変更など)ができてしまう

  • 以下の2つの場合に使用される

    1. ユーザーがローエンドデバイスを使用していない
    2. ユーザーがセルラーネットワークを使用していない
  • NoStatePrefetch用に新しい専用レンダラーが作成される

  • NoStatePrefetchでロードされているリソースがフェッチされます。次に、HTMLPreloadScannerはこのリソースをスキャンして、フェッチする必要のあるサブリソースを検出

  • メインリソースまたはそのサブリソースのいずれかに登録済みのService Workerがある場合はそれ経由でフェッチする

  • フェッチされるサブリソースは、「IDLE」ネットプライオリティでフェッチ

  • サブリソースがタイムアウトした場合、レンダラーは30秒後に強制終了

  • ブラウザは、DNSキャッシュの更新と、応答にSet-Cookieヘッダーが含まれている場合のCookieストアの更新以外には状態を変更しない