Help us understand the problem. What is going on with this article?

Pre Render

More than 3 years have passed since last update.

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 に対応していればブラウザが途中から取得し直すということが可能になる。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away