window.addEventListener('pagereveal')
（アクティブ状態で）
最初のレンダリング直前に起動するイベントが、
Chromeにて提案および開発されているようです。
Chromeにて実装されます。
Chromium
Chrome Canary
などで動作確認出来ます。ただし、
flagsの設定変更が動作させるには必要です。
chrome://flags/#view-transition-on-navigation
Enable pagereveal event in stable
pagereveal event
pagereveal event
sample
以下コードで試してみます。
script.js
/*
3.
141592653589 793238462643 383279502884 197169399375 105820974944 592307816406 286208998628 034825342117
067982148086 513282306647 093844609550 582231725359 408128481117 450284102701 938521105559 644622948954
以下略（ロードに時間が掛かるファイルサイズになる行数分記載）
*/
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>
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>
キャッシュが効かないようCtrl+F5など、
ハードリフレッシュでリロードすると、
<script defer>は、
スクリプトが読み込まれるまで、
DOMContentLoadedが抑制されるので、
以下の通り出力されます。
pagereveal
script.js onload
script.js loaded
DOMContentLoaded
<script async blocking="render">は、
スクリプトが読み込まれるまで、
renderが抑制されるので、
以下の通り出力されます。
DOMContentLoaded
script.js onload
script.js loaded
pagereveal
blocking="render"
blocking="render"
async
async
defer
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 のチェックを戻しておきます。
DevTools Network
DevTools Network
Disable cache
DevTools Performance
DevTools Performance
FP / FCP / LCP / DCL / L
Critical Rendering Path
Critical Rendering Path
Populating the page: how browsers work