# Introduction to Resource Hints
2016.12.05 [Frontrend Vol.8](https://frontrend.connpass.com/event/45238/) [@1000ch](http://twitter.com/1000ch)
## @1000ch
- 株式会社サイバーエージェント
- 専門は Web 技術全般
- 趣味で Node.js や iOS など
## Resource Hints とは
これから必要になるリソースを `` 要素で定義し、それをブラウザが **投機的に** 取得する機能
# 投機的に？
## 「成否は確実でないが、機会を上手く利用して利益を得ようとする行為を形容する。」
現在のページロードを邪魔しないように、ブラウザがアイドルの時に必要になるリソースをロードしてもらう
## [Resource Hints](https://w3c.github.io/resource-hints/)
- [DNS Prefetch](https://w3c.github.io/resource-hints/#dns-prefetch): 投機的な DNS 解決
- [Preconnect](https://w3c.github.io/resource-hints/#preconnect): 投機的な TCP 接続
- [Prefetch](https://w3c.github.io/resource-hints/#prefetch): 投機的なリソース取得
- [Prerender](https://w3c.github.io/resource-hints/#prerender): 投機的なページ描画
## DNS Prefetch
```html
```
- 指定したオリジンへの DNS 解決を行う
- ドメインがわかるが、スキーマが定まらない場合に使う
## Preconnect
```html
```
- 指定したオリジンへの DNS 解決を含む TCP 接続を行う
- ドメイン及びスキーマがわかっている場合に使う
## Prefetch
```html
```
- 指定した URL のリソースを取得する
- `as` はオプショナルだが、付けておくと良い
## Preload directive
- **(none)**: XHR, fetch `link rel=preload href=...`
- **media**: `audio`, `video`
- **script**: `script`, importScripts の script
- **style**: `link rel="stylesheet"`, CSS の `@import`
- **font**: CSS の `@font-face`
- **image**: `img`, `picture`, `srcset`, CSS の `-image`
他には `worker`, `embed`, `object`, `documenet` など
## Prerender
```html
```
- 指定した URL の HTML ドキュメントの取得及び評価を行う
- 描画まで実行するので、高速にナビゲーションされる
- コストも大きいので、次に発生する可能性の高いナビゲーションに対して実施すると良い
## Hint probability
```html
```
- リソースの優先度を `pr` 属性に `0.0~1.0` で指定する
## 👆 ハイコストハイリターン
- `prerender`: 予め決まった遷移、プライマリなアクション
- `prefetch`: クリティカルなCSS/JS、キーとなるメディア
- `preconnect`: 別ドメインのAPIサーバーやCDN
- `dns-prefetch`: 同上
## 👇 ローコストローリターン
## Chrome の Prerender History
[`chrome://net-internals/#prerender`](chrome://net-internals/#prerender)
## Try in your browser?
```javascript
const link = document.createElement('link');
link.rel = 'prerender';
link.href = document.querySelector('a').href;
document.head.appendChild(link);
```
## Questions?
- [https://twitter.com/1000ch](https://twitter.com/1000ch)
- [https://github.com/1000ch](https://github.com/1000ch)