事前レンダリング

事前レンダリング (Web)

仕様書

リンク型 prerender

[25] リンク型 prerender は、 指定された資源が次の navigate で必要となるかもしれず、 予め fetch およびその先の処理 (部分資源fetchレンダリングの一部の実施) が有用と思われる (するべき >>26) ことを示します >>22

[23] リンク型 prerender は、 link 要素で指定でき、外部資源リンクを作成します >>22

[42] Link: ヘッダーでも指定できます >>41

[24] このリンク型body-ok です >>22。つまりこのリンク型link 要素は、 head 要素内のみならず、 body 要素内でも使えます。

[53] 著者は、 prerender link 要素よりも前に関係する CSP meta 要素を置くべきです >>50

[54] 著者は、 prerender Link: ヘッダーを使うなら関係する CSP ヘッダーも含めるべきです >>50

[55] >>53>>54 に違反すると、処理順序の規定により、 CSP の制限が適用されないことになります。

[36] このリンク型は次に navigate されるであろう HTML を指定するのに有用です。それ以外の時は、 prefetch が適切です。 >>26

visibilityState 属性の値 prerender (DOM)

[6] Document オブジェクトvisibilityState 属性は、最上位閲覧文脈に含まれている Document が画面外で読み込まれていて表示されていない時は、 prerender を返して構いません>>5

[7] ただし prerender という値には対応しなくても構わない >>5 とされています。
[8] document.hiddenになります。

[35] prerender による事前レンダリングの場合、 visibilityStateprerender としなければなりません >>26

[17] 文書可視性状態の値事前レンダリング (prerender) は、 文書事前レンダリングのため読み込まれ、まだ可視状態になっていないことを表します >>16

[19] 文書は、事前レンダリングされた時、可視性状態事前レンダリングに設定されます >>18。一旦可視状態に遷移すると、再び事前レンダリングに戻ることはありません。

visibilitychange も参照。

処理

[46] fetch は、obtain the resource によります >>41

[49] 混合内容に関して optionally blockable です >>50

[51] CSPReferrer Policy が適用されます >>50

[52] 適用するかどうか、利用者が設定できるようにすることができます >>50

[44] 現在の navigate の処理の干渉するべきではありません。 それを防ぐため fetch を遅延させて構いません >>41

[27] 利用者エージェントの判断により、 prerender で指定された HTML応答について、 その fetch その他の部分資源も含めて次のように前処理して構いません >>26

[38] 事前レンダリングの動作の詳細は不明です。元の閲覧文脈に属するものとみなされると思われます。 スクリプトも動作するようです。各種処理が正常に動作するためには活性文書事前レンダリングされる文書である必要がありそうですが、 現在表示中の文書のみが当該閲覧文脈活性文書のはずですから、 特別な扱いがなされていると思われます。

[39] 事前レンダリングが本レンダリングに移行する処理の詳細も不明です。 少なくても now visible algorithm により可視性状態が変更されると思われます。

[69] webNavigation APIonTabReplaced は、 事前レンダリングへの navigate が発生した時に現在時刻と共に実行されます。

[40] 事前レンダリング入れ子閲覧文脈の本レンダリングに利用されるのかは不明です。

[43] 利用者エージェントは、その判断により、投機的fetchを取り消しできます >>41

[45] 利用者エージェントは、次の navigate があっても投機的fetchを継続するべきです >>41

[47] obtain the resource により load/error イベント発火されることになっています。しかし投機的fetch の実行のタイミングは実装依存ですし、完全には処理されないかもしれません。 従ってできるだけ適切に発火するべきですが、 発火しなくても構いませんし、完全に処理せずとも発火することも認められています >>48

歴史

[60] Instant Support - The Chromium Projects ( ()) https://www.chromium.org/developers/design-documents/instant/instant-support

[61] Official Google Blog: Knocking down barriers to knowledge ( ()) https://googleblog.blogspot.jp/2011/06/knocking-down-barriers-to-knowledge.html

[62] Google Chrome Blog: Instant Pages on Google Chrome ( ()) https://chrome.googleblog.com/2011/08/instant-pages-on-google-chrome.html

[63] Google Chrome Blog: Faster than fast ( ()) https://chrome.googleblog.com/2011/06/faster-than-fast.html

[64] Google InstantがChrome(dev/canary)のアドレスバーで利用可能に! | ライフハッカー[日本版] ( ()) http://www.lifehacker.jp/2010/10/101004googleinstantincanary.html

[65] Issue 509313 - chromium - chrome.embeddedSearch.newTabPage.navigateContentWindow is too powerful - Monorail ( ()) https://bugs.chromium.org/p/chromium/issues/detail?id=509313

[66] CVE - CVE-2016-1625 ( ()) http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2016-1625

[67] chrome.webNavigation - Google Chrome ( ()) https://developer.chrome.com/extensions/webNavigation

If a navigation was triggered via Chrome Instant or Instant Pages, a completely loaded page is swapped into the current tab. In that case, an onTabReplaced event is fired.

[9] Web Developer's Guide to Prerendering in Chrome - Google Chrome — Google Developers ( ( 版)) https://developers.google.com/chrome/whitepapers/prerender?hl=ja

[10] Resource Hints ( ( 版)) https://igrigorik.github.io/resource-hints/#prerender

[11] Add preload/prerender. Still need CSP alignment. See #36 · whatwg/fetch@26e5cca ( 版) https://github.com/whatwg/fetch/commit/26e5cca8ab5bb4b68a8f238f41dd7364d8c276b3

[12] Add "prerender" as navigation request context per https://github.com/w3c... · whatwg/fetch@04f7c75 ( 版) https://github.com/whatwg/fetch/commit/04f7c7560fdd1d7f09cd1aa62b94794e1cd094a8

[13] プリレンダリングとプリフェッチのサポート (Windows) ( 版) https://msdn.microsoft.com/library/dn265039(v=vs.85).aspx

[14] 22676 – APIs for page prerendering ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=22676

[15] cleanup visibilityState conditions · w3c/page-visibility@cd72018 ( 版) https://github.com/w3c/page-visibility/commit/cd7201817c3f2115e7a4ef8e05fbca01e5e91103

[20] Link relations: add dns-prefetch/preconnect/prerender; update prefetch ( (domenic著, )) https://github.com/whatwg/html/commit/0f54b54307647ca15ace16ef03c570db1b918193

[21] Treat <link rel="next"> as a general resource hint ( (domenic著, )) https://github.com/whatwg/html/commit/7ff5b096d423bf5750463957aed69680368ed99e

[56] Prerender Test ( ()) https://prerender-test.appspot.com/

[57] Prerender - Google グループ ( ()) https://groups.google.com/a/chromium.org/forum/?csw=1#!forum/prerender

[58] Chromium Blog: Prerendering in Chrome ( ()) http://blog.chromium.org/2011/06/prerendering-in-chrome.html

[59] What Google Chrome Instant Is And Why It's Badass ( ()) http://www.makeuseof.com/tag/google-chrome-instant-badass/

Chrome Instant is a feature that was rolled into the latest stable version of Google’s Chrome browser. If you spend a lot of time surfing the web, it can save you some serious time while browsing different websites.

Similar to instant search on Google.com, Chrome Instant loads websites for you as you’re typing in the URL. For example, let’s say you open up your browser and want to head to Facebook. As you start typing ‘www.fa’ your Facebook homepage loads up. If you were intending to go to, say, FailBlog.org instead, just keep typing and Chrome Instant will continue loading pages instantly for you.

[68] プリレンダリングとプリフェッチのサポート (Windows) ( ()) https://msdn.microsoft.com/library/dn265039(v=vs.85).aspx

プリレンダリングでは次の条件が満たされている必要があります。

ユーザーが従量制課金接続を使っている場合、Web ページをプリレンダリングできるかどうかは、ページの表示に使用しているデバイスのデータ使用プランによって決まります。

ターゲット URL がファイル ダウンロードではない。

ターゲット URL で "http://" プロトコルまたは "https://" プロトコルが使われている。

ターゲット URL がトップ レベルのドキュメントである (iframe ドキュメントではない)。

一度にプリレンダリングできる Web ページは 1 つまでである。

link 要素を含むドキュメントが表示される (ドキュメントがフォアグラウンド タブで読み込まれ、最小化されない)。

次の場合は、ページをバックグラウンドで完全にレンダリングすることはできません。

ターゲット ページでユーザー インターフェイスの変更 (alert ボックス、window.open の呼び出し、セキュリティ通知など) がトリガーされる場合。

ターゲット ページで video 要素または audio 要素を使ってメディア ファイルが自動的に再生される場合。

ターゲット ページで travel log が変更される場合。

F12 ツール ウィンドウが開いている場合。

これらの場合、ターゲット ページがバックグラウンドで一時停止します。 ユーザーがターゲット ページを選ぶと、ターゲット ページが表示されて、一時停止した場所からレンダリングが再開されます。

プリレンダリングされたページは、常にユーザーに表示されるとは限りません。 次の場合は、プリレンダリングされたページが表示されずにメモリから破棄されます。

ユーザーがターゲット ページを 5 分以内に開かなかった場合。

ユーザーが別のページを開いた場合。

ユーザーが別のタブまたは別のブラウザー インスタンスに切り替えた場合。

JavaScript プロセスによって、プリレンダリングされた別の Web ページを要求する新しい link 要素が追加された場合。

ターゲット ページの読み込み中にエラーが発生した場合 (HTTP エラー コード 500 (サーバー エラー)、404 (リソースが見つかりません)、接続の問題などの関連エラーなど)。

プリレンダリングされたページが破棄された後に要求された場合は、ホストするサーバーから直接読み込まれます。ページがブラウザー キャッシュにまだ残っている場合はすぐに読み込まれることもありますが、これが保証されるわけではありません。

バックグラウンドでページを読み込むと、副次的な影響が発生することがあります。 具体的には、load イベントの間に実行される操作には次のような問題があります。

Microsoft ActiveX コントロールは、ユーザーがページを表示するまで読み込まれません。 そのオブジェクトを JavaScript で使う前に、使用可能なことを readyState プロパティで確認してください。

ページが表示されるときに、一部のアニメーションが表示されない場合があります。これは、ページがバックグラウンドで読み込まれている間にアニメーションが既に実行されたためと考えられます。

タイマーで予期しない結果が返される場合があります。

Cookie、キャッシュされたコンテンツ、非同期操作による変更 (IndexedDB、Web ストレージなど) は維持されます。

[70] Mark prerender at risk (plehegar著, ) https://github.com/w3c/page-visibility/commit/088beae54455ae3f0114f79159de989ed1447a21

[71] Introduce 'prefetch-src'. (#283) (mikewest著, ) https://github.com/w3c/webappsec-csp/commit/91adc4ab7beb21bcc05e3ebeeb035d2745c7817d

[72] Introduce 'prefetch-src'. Closes w3c/webappsec-csp#107. by mikewest · Pull Request #283 · w3c/webappsec-csp () https://github.com/w3c/webappsec-csp/pull/283

[73] Add prefetch and prerender initiators (yoavweiss著, ) https://github.com/whatwg/fetch/commit/d5d084096392f2c47841308952a76751bafdd375

[74] Introduce 'prefetch-src'. Closes w3c/webappsec-csp#107. by mikewest · Pull Request #283 · w3c/webappsec-csp () https://github.com/w3c/webappsec-csp/pull/283

[75] Intent to Deprecate and Remove: Prerender - Google グループ () https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0nSxuuv9bBw/EMfaclV-AwAJ

[76] Introducing NoState Prefetch  |  Web  |  Google Developers () https://developers.google.com/web/updates/2018/07/nostate-prefetch

[77] Temporal proposal · Issue #311 · w3ctag/design-reviews () https://github.com/w3ctag/design-reviews/issues/311

[78] tc39/proposal-temporal () https://github.com/tc39/proposal-temporal