最初のレンダリング直前に起動するpagerevealイベント

```javascript
window.addEventListener('pagereveal')
```

（アクティブ状態で）
最初のレンダリング直前に起動するイベントが、
~~Chromeにて提案および開発されているようです。~~
Chromeにて実装されます。

~~[Chromium](https://www.chromium.org/getting-involved/download-chromium/#chromium)
[Chrome Canary](https://www.google.com/chrome/canary/)
などで動作確認出来ます。ただし、
flagsの設定変更が動作させるには必要です。
[chrome://flags/#view-transition-on-navigation](chrome://flags/#view-transition-on-navigation)~~
[Enable pagereveal event in stable](https://github.com/chromium/chromium/commit/39829c26521290c0d201282534323c16531b1116)

:::note info
pagereveal event
[pagereveal event](https://chromestatus.com/feature/5205586941837312)
:::

## sample

以下コードで試してみます。

<details>
<summary>:notebook_with_decorative_cover: script.js</summary>

```javascript:script.js
/*
3.
141592653589 793238462643 383279502884 197169399375 105820974944 592307816406 286208998628 034825342117 
067982148086 513282306647 093844609550 582231725359 408128481117 450284102701 938521105559 644622948954 
以下略（ロードに時間が掛かるファイルサイズになる行数分記載）
*/
```

</details>

<details>
<summary>:notebook_with_decorative_cover: sample.pagereveal.script.defer.html</summary>

```html:sample.pagereveal.script.defer.html
<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample</title>
    <link rel="icon" href="data:,">
    <script src="script.js" defer onload="console.log(`${this.src} onload`)"></script>
    <script>document.querySelector('script[src="script.js"]').addEventListener('load', e => console.log(`${e.target.src} loaded`));</script>
    <script>window.addEventListener('DOMContentLoaded', () => console.log('DOMContentLoaded'));</script>
    <script>window.addEventListener('pagereveal', () => console.log('pagereveal'));</script>
  </head>
  <body>
    <header><p>header</p></header>
    <main><p>main</p></main>
    <footer><p>footer</p></footer>
  </body>
</html>
```

</details>

<details>
<summary>:notebook_with_decorative_cover: sample.pagereveal.script.async.blocking.render.html</summary>

```html:sample.pagereveal.script.async.blocking.render.html
<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample</title>
    <link rel="icon" href="data:,">
    <script src="script.js" async blocking="render" onload="console.log(`${this.src} onload`)"></script>
    <script>document.querySelector('script[src="script.js"]').addEventListener('load', e => console.log(`${e.target.src} loaded`));</script>
    <script>window.addEventListener('DOMContentLoaded', () => console.log('DOMContentLoaded'));</script>
    <script>window.addEventListener('pagereveal', () => console.log('pagereveal'));</script>
  </head>
  <body>
    <header><p>header</p></header>
    <main><p>main</p></main>
    <footer><p>footer</p></footer>
  </body>
</html>
```

</details>

キャッシュが効かないようCtrl+F5など、
ハードリフレッシュでリロードすると、

`<script defer>`は、
スクリプトが読み込まれるまで、
DOMContentLoadedが抑制されるので、
以下の通り出力されます。

```console
pagereveal
script.js onload
script.js loaded
DOMContentLoaded
```

`<script async blocking="render">`は、
スクリプトが読み込まれるまで、
renderが抑制されるので、
以下の通り出力されます。

```console
DOMContentLoaded
script.js onload
script.js loaded
pagereveal
```

:::note info
blocking="render"
[blocking="render"](https://qiita.com/feo52/items/01bbbbb8f72f7e8196ed)
:::

:::note info
async
[async](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async)
:::

:::note info
defer
[defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
:::

## timing

DevTools の Network の Panel で キャッシュを無効化して、
DevTools の Performance の Panel で確認してみます。

DevTools の Network の Panel を開いて、
Disable cache をチェックしたのち、
DevTools の Performance の Panel を開いて、
Ctrl+Shift+E を押してページロード時点から記録します。

上記コードであれば10秒程で記録が完了するので、
Ctrl+F で pagereveal を検索します。
[∧][∨]を押して検索結果を動かして、
Event: pagereveal
を探し出して見ると、

上記コード両方ともに、
Event: pagereveal は、
[FP] [FCP] [LCP] の手前で、
発生しているので、

Event: pagereveal は、
[FP] [FCP] [LCP] の手前で、
発火することが確認出来ます。

確認が終了したら、
DevTools の Network の Panel の、
Disable cache のチェックを戻しておきます。

:::note info
DevTools Network
[DevTools Network](https://developer.chrome.com/docs/devtools/network/reference/)
[Disable cache   ](https://developer.chrome.com/docs/devtools/network/reference/#disable-cache)
:::

:::note info
DevTools Performance
[DevTools Performance    ](https://developer.chrome.com/docs/devtools/performance/reference/)
[FP / FCP / LCP / DCL / L](https://developer.chrome.com/docs/devtools/performance/reference/#timings)
:::

:::note info
Critical Rendering Path
[Critical Rendering Path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)
[Populating the page: how browsers work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work)
:::

:::note info
Appendix
https://feo52.hatenablog.jp/entry/2023/10/15/000000#main
:::