Pre Render

pre-browsing シリーズの最後。

後ろに隠しタブを実際に立ち上げて、 pre-fetch した結果をレンダリングするイメージ。

実際に location が変わった場合は、その結果を前に持ってくるだけなので、最速で遷移することができる。

API

<link rel="prerender" href="://example.com">

page visibility の考慮

ただし、この場合はブラウザ上で実際に CSS の適用や JS の実行なども含めて動くので注意が必要。
例えば、ユーザが見ていないのに video の再生が始まったり(音は出るんだろうか？)、実際にはアクセスしていないのに Analytics に情報を飛ばしたりしてしまう可能性があるので、それがまずい場合は、 page visibility API などを用いて場合分けする必要がある。

range をつける

prefetch もそうだけど、例えば prefetch をしている最中にその画面に遷移してしまった場合どうするかという問題がある。

これはブラウザによって違う。

基本的には一旦中止されるので、 prefetch レベルが終わってればレンダリングだけやり直すことになりそう。
prefetch が中断している場合は、 range に対応していればブラウザが途中から取得し直すということが可能になる。

問題はそういうことが可能なコンテンツなのかということだ。
基本的には静的コンテンツとの相性が良いということがわかる。