事前レンダリング (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 による事前レンダリングの場合、 visibilityState を prerender としなければなりません >>26。

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

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

visibilitychange も参照。

処理

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

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

[51] CSP や Referrer Policy が適用されます >>50。

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

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

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

[28] 事前レンダリング中の内容に対して、少な目に CPU、GPU、メモリーの資源を割り当てる。
[29] HTML が可視状態になるまで要求の一部を遅延させる。 (媒体、プラグインなど。)
[30] 利用できる資源が限られる時は事前レンダリングしない。
[31] 資源消費が激しいときは事前レンダリングを取りやめる。 (CPU やメモリーの利用量が多い、データアクセスが高価など)
[32] fetch の内容の種別や特性に応じて事前レンダリングを取りやめる。
- [33] 冪等でない挙動を示す - 共有局所ストレージへの書き込み、 GET・HEAD・OPTION 以外の XHR など。
- [34] 利用者の入力を求める挙動を示す - 確認ダイアログ、認証ダイアログ、alert その他。
[37] その他利用者エージェント依存の実装戦略に依る。

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

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

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

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

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

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

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

歴史

[60] Instant Support - The Chromium Projects ( (2016-06-18 00:23:35 +09:00)) https://www.chromium.org/developers/design-documents/instant/instant-support

[61] Official Google Blog: Knocking down barriers to knowledge ( (2016-06-18 01:07:55 +09:00)) https://googleblog.blogspot.jp/2011/06/knocking-down-barriers-to-knowledge.html

[62] Google Chrome Blog: Instant Pages on Google Chrome ( (2016-06-17 16:56:29 +09:00)) https://chrome.googleblog.com/2011/08/instant-pages-on-google-chrome.html

[63] Google Chrome Blog: Faster than fast ( (2016-06-17 16:56:29 +09:00)) https://chrome.googleblog.com/2011/06/faster-than-fast.html

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

[65] Issue 509313 - chromium - chrome.embeddedSearch.newTabPage.navigateContentWindow is too powerful - Monorail ( (2016-06-18 01:25:34 +09:00)) https://bugs.chromium.org/p/chromium/issues/detail?id=509313

[66] CVE - CVE-2016-1625 ( (2016-06-18 01:25:58 +09:00)) http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2016-1625

[67] chrome.webNavigation - Google Chrome ( (2016-06-18 01:26:46 +09:00)) 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 ( (2012-03-30 22:53:52 +09:00 版)) https://developers.google.com/chrome/whitepapers/prerender?hl=ja

[10] Resource Hints ( (2014-08-05 22:14:16 +09:00 版)) https://igrigorik.github.io/resource-hints/#prerender

[11] Add preload/prerender. Still need CSP alignment. See #36 · whatwg/fetch@26e5cca (2015-04-05 18:50:23 +09:00 版) https://github.com/whatwg/fetch/commit/26e5cca8ab5bb4b68a8f238f41dd7364d8c276b3

[12] Add "prerender" as navigation request context per https://github.com/w3c... · whatwg/fetch@04f7c75 (2015-05-05 11:35:34 +09:00 版) https://github.com/whatwg/fetch/commit/04f7c7560fdd1d7f09cd1aa62b94794e1cd094a8

[13] プリレンダリングとプリフェッチのサポート (Windows) (2015-05-07 17:14:06 +09:00 版) https://msdn.microsoft.com/library/dn265039(v=vs.85).aspx

[14] 22676 – APIs for page prerendering (2015-09-17 14:47:09 +09:00 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=22676

[15] cleanup visibilityState conditions · w3c/page-visibility@cd72018 (2015-11-13 23:46:11 +09:00 版) https://github.com/w3c/page-visibility/commit/cd7201817c3f2115e7a4ef8e05fbca01e5e91103

[20] Link relations: add dns-prefetch/preconnect/prerender; update prefetch ( (domenic著, 2016-04-28 07:26:36 +09:00)) https://github.com/whatwg/html/commit/0f54b54307647ca15ace16ef03c570db1b918193

[21] Treat <link rel="next"> as a general resource hint ( (domenic著, 2016-05-19 16:38:13 +09:00)) https://github.com/whatwg/html/commit/7ff5b096d423bf5750463957aed69680368ed99e

[56] Prerender Test ( (2016-06-18 01:30:36 +09:00)) https://prerender-test.appspot.com/

[57] Prerender - Google グループ ( (2016-06-18 01:30:50 +09:00)) https://groups.google.com/a/chromium.org/forum/?csw=1#!forum/prerender

[58] Chromium Blog: Prerendering in Chrome ( (2016-06-15 21:23:08 +09:00)) http://blog.chromium.org/2011/06/prerendering-in-chrome.html

[59] What Google Chrome Instant Is And Why It's Badass ( (2016-06-18 01:15:39 +09:00)) 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) ( (2016-06-18 01:34:03 +09:00)) 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 ストレージなど) は維持されます。