ブラウザの制約条件から考えるフロントエンドのリソース設計/Frontend Performance How to

Slide 1

Slide 1 text

ブラウザの制約条件から考えるフロントエンドのリソース設計～ブラウザができること、できないこと～ 1 株式会社ラクーンホールディングス羽山純

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

● 名前 ○ 羽山純 ● 所属 ○ 株式会社ラクーンホールディングス技術戦略部 ● 技術領域 ○ サーバーサイド開発 ○ パフォーマンス改善 ○ AI開発（企業審査のAI） ● 趣味 ○ 旅行（ダイビング） ○ アプリ開発？自己紹介 3

Slide 4

Slide 4 text

ラクーンホールディングスとは？事業者間取引(BtoB)の領域で問屋のECサイトや決済サービス・保証事業を展開 Ruby bizグランプリ2017 「Fintech賞」を受賞 Ruby biz 2017 4

Slide 5

Slide 5 text

講演について 5

Slide 6

Slide 6 text

講演について本日の講演は以下の寄稿記事をベースとしています。 Software Design 2019年10月号 "速い"Webアプリケーションの作り方フロントエンド編「第2章パフォーマンスを落とさないリソース設計」本日の講演を面白いと感じていただけた方は是非、本誌も手に取っていただけたらと思います。 6

Slide 7

Slide 7 text

デモ環境について 7

Slide 8

Slide 8 text

デモ環境について本日はデモ環境で実際に動かしながら進めます。 Node.js製の簡易ウェブサーバを利用します。 https://github.com/forrep/web-performance 覚えておくルールは1つだけ。ファイル名パターンで転送遅延させてます。 hoge.html ⇒ 遅延なし hoge_10s.html ⇒10秒遅延してから転送(TTFB =10秒) hoge_10s_g.html ⇒10秒間で徐々に転送(TTFB = 0秒) 8

Slide 9

Slide 9 text

デモ環境について実際に試してみたい方 ※Node.js v4以降が必要、追加ライブラリ不要本日のイベントで利用する環境には以下のURLでアクセスできます。 http://localhost:8080/event/ 9 $ git clone https://github.com/forrep/web-performance.git $ cd web-performance $ node server.js Starting on http://localhost:8080

Slide 10

Slide 10 text

では、始めましょう 10

Slide 11

Slide 11 text

DOM(Document Object Model)構築とは ● HTMLをブラウザがパースしてDOMを構築する ● 構築されたDOMは、そのまま画面に表示される ● このHTMLファイルを10秒で徐々に転送してみる巨大なHTMLドキュメント body { font-size: 5pt; } ■ ■ ■ ■ ・・ ■ 10,000行 11

Slide 12

Slide 12 text

DOM(Document Object Model)構築とはデモを見る ※ 2. 巨大なHTMLを10秒で徐々に転送 12

Slide 13

Slide 13 text

DOM(Document Object Model)構築とは DOM構築 = 画面表示 DOM構築されたら、即時に画面表示されます。（実は半分ウソ、真実は後述） 13

Slide 14

Slide 14 text

JavaScriptとDOM構築のブロック ● タグで外部JavaScriptを読み込む。 ● <script>読み込みでサーバー側の遅延処理が入る、転送に5秒間かかる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>03 JavaScriptはDOM構築をブロック</title> </head> <body> <div>この文章はすぐに表示される。</div> <script src="time_5s.js">

この文章はJavaScriptが実行された後（5秒後）に表示される

Slide 15

Slide 15 text

JavaScriptとDOM構築のブロック ● time.js は以下の内容で、実行した時間をに「Exec: ○○sec」と追記するだけ。 (function() { var tag = '

Exec: ' + (performance.now()/1000).toFixed(2) + 'sec

'; var insertTag = function() { document.body.insertAdjacentHTML('beforeend', tag); }; if (document.body) { insertTag(); } else { document.addEventListener("DOMContentLoaded", insertTag); } })(); 15 のDOMを構築済みならそのまま追記のDOMが未構築なら DOMContentLoadedのタイミングで追記

Slide 16

Slide 16 text

JavaScriptとDOM構築のブロックデモを見る ※ 3. JavaScriptとDOM構築のブロック 16

Slide 17

Slide 17 text

JavaScriptとDOM構築のブロック HTML転送 ≠ DOM構築 = 画面表示はDOM構築をブロックする「HTML転送済み」≠「DOM構築済み」 17

Slide 18

Slide 18 text

タグの動的生成(Script-Inject) ● Script-InjectはDOM構築をブロックしない = 非同期化 <!DOCTYPE html> <head> <meta charset="utf-8"> <script> (function() { var tag = document.createElement('script'); tag.src = 'time_5s.js'; document.head.appendChild(tag); })(); Script-Injectによる非同期化

Script-InjectはDOM構築をブロックしない、この文章はすぐに表示される。

「5秒後」にJavaScriptが実行される

18 5秒遅延

Slide 19

Slide 19 text

タグの動的生成(Script-Inject) デモを見る ※ 4. Script-Injectによる<script>タグ生成 19

Slide 20

Slide 20 text

タグの動的生成(Script-Inject) Script-InjectはDOM構築をブロックしない素晴らしいように思えますが、大きなデメリットが2つあります 20

Slide 21

Slide 21 text

CSS/CSSOMとレンダリングブロック ● で読み込んだCSSは CSSOM(CSS Object Model)が構築されるまでレンダリング（＝画面表示）をブロックする ● bold.cssは太字・アンダーライン付きにするだけ CSSOM構築によるレンダリングブロック

この文章はCSSOM構築を待つため「5秒後」に表示される。

21 5秒遅延 body { font-weight: bold; text-decoration: underline; }

Slide 22

Slide 22 text

CSS/CSSOMとレンダリングブロックデモを見る ※ 5. CSSOM構築によるレンダリングのブロック 22

Slide 23

Slide 23 text

CSS/CSSOMとレンダリングブロック CSSOMの構築完了までレンダリングはブロックされる ※内で読み込んだ場合のみ CSSOMの構築は DOM構築をブロックしない（DOMContentLoadedはすぐに発火する） 23

Slide 24

Slide 24 text

画面表示に必要な2つの鍵画面表示には2つの鍵が必要 DOM構築（都度表示可能）内のCSSOMを完全に構築済み 24

Slide 25

Slide 25 text

タグの動的生成(CSS-Inject) ● CSS-Injectならレンダリングをブロックしない = 非同期化 (function() { var tag = document.createElement('link'); tag.href = 'bold_5s.css'; tag.rel = 'stylesheet'; document.head.appendChild(tag); })(); CSS-Injectによるブロック解除

この文章はすぐに表示される。

「5秒後に」強調表示に変化する。

25 5秒遅延

Slide 26

Slide 26 text

タグの動的生成(CSS-Inject) デモを見る ※ 8. CSS-InjectによるCSS読み込み 26

Slide 27

Slide 27 text

タグの動的生成(CSS-Inject) CSS-Injectならレンダリングをブロックしない Flash of Unstyled Content(FOUC)に注意 ※CSS未適用の画面が表示される現象 27

Slide 28

Slide 28 text

メディアクエリでレンダリングのブロックを解除 ● でレンダリングブロックを解除 = 非同期化 CSSのメディアクエリによるブロック解除

この文章はすぐに表示される。

「5秒後」に強調表示に変化する。

28 5秒遅延 onloadでallに戻す

Slide 29

Slide 29 text

メディアクエリでレンダリングのブロックを解除デモを見る ※ 9. メディアクエリをprintとしてCSS読み込み 29

Slide 30

Slide 30 text

メディアクエリでレンダリングのブロックを解除ならレンダリングをブロックしないしかし、転送優先度が最低(Lowest)になってしまう 30 Lowest!!

Slide 31

Slide 31 text

CSSとJavaScriptの読み込み ● CSSとJavaScriptを読み込み ● CSSOMの構築はDOM構築をブロックしない JavaScriptとCSS読み込み

この文章は「5秒後」に表示される。

JavaScriptも同じタイミング（5秒後）で実行される。

31 3秒遅延 5秒遅延

Slide 32

Slide 32 text

CSSとJavaScriptの読み込みデモを見る ※10. CSSとJavaScript読み込み 32

Slide 33

Slide 33 text

CSSとJavaScriptの読み込み CSSOM構築完了は3秒後。しかしで5秒間DOM構築が停止、画面表示は5秒後まで待たされます。 33

Slide 34

Slide 34 text

CSS読み込みとScript-Inject ● JavaScriptをScript-Injectで非同期化 (function() { var tag = document.createElement("script"); tag.src = 'time_5s.js'; document.head.appendChild(tag); })(); CSS読み込みとScript-Inject

この文章は「3秒後」に表示される。

JavaScriptは「8秒後」に実行される。

34 3秒遅延 5秒遅延

Slide 35

Slide 35 text

CSS読み込みとScript-Inject デモを見る ※ 11. CSS読み込みとScript-Inject 35

Slide 36

Slide 36 text

Script-Injectによる非同期化で画面表示は3秒後に高速化しかし Script-Injectの実行がCSSOM構築を待つので 3秒 + 5秒 = 8 秒後にJavaScriptが実行されるこれがScript-Injectの問題点の1つです。 CSS読み込みとScript-Inject 36

Slide 37

Slide 37 text

CSS読み込みとScript-Inject JavaScriptの実行はCSSOMの構築を待つ（外部ファイル・インライン共に） 37

Slide 38

Slide 38 text

リソースのプリロード機能 ≠ rel=preload ● JavaScriptを、通常 ⇒ Script-Injectの順に読み込み (function() { var tag = document.createElement("script"); tag.src = 'time_5s.js?no=2'; document.head.appendChild(tag); })(); 通常⇒ScriptInjectで読み込み

この文章は「5秒後」に表示されます。

JavaScript(1つ目)は「5秒後」に実行されます。

JavaScript(2つ目)は「10秒後」に実行されます。

38 5秒遅延 5秒遅延

Slide 39

Slide 39 text

リソースのプリロード機能 ≠ rel=preload デモを見る ※ 12. JavaScriptを通常読込⇒Script-Inject 39

Slide 40

Slide 40 text

リソースのプリロード機能 ≠ rel=preload ● JavaScriptを、通常読み込み ⇒ 通常読み込み通常⇒ScriptInjectで読み込み

この文章は「5秒後」に表示されます。

JavaScript(1つ目)は「5秒後」に実行されます。

JavaScript(2つ目)も「5秒後」に実行されます。

40 5秒遅延 5秒遅延

Slide 41

Slide 41 text

リソースのプリロード機能 ≠ rel=preload デモを見る ※ 13. JavaScriptを通常読込⇒通常読込 41

Slide 42

Slide 42 text

はDOM構築が停止中でもブラウザのプリロード機能が先読みする。 Script-Injectはプリロード機能が効かないこれが2つめの問題点です。リソースのプリロード機能 ≠ rel=preload 42

Slide 43

Slide 43 text

● 元々は2008年頃にIE8で実装されたもの ● ブラウザによって名称が異なる ○ Lookahead Downloader (IE8) ○ Pre-loader ○ Preload Scanner (WebKit) ● 同じ時期にIEは同時Download数を2個⇒6個へ ○ 現在は同時DL数6個がデファクトとなった ● と使い分けが必須 ○ 基本はプリロード機能に任せる ○ 動的に読み込まれるものには rel=preload リソースのプリロード機能 ≠ rel=preload 43

Slide 44

Slide 44 text

をasync属性で非同期化 ● <script>にasync属性を付けると非同期化する <!DOCTYPE html> <head> <meta charset="utf-8"> <link href="bold_3s.css" rel="stylesheet"> <script src="time_5s.js" async> JavaScriptをasync指定

この文章はCSSOM構築を待って「3秒後」に表示されます。

JavaScriptは「5秒後（表示されてから2秒後）」に実行されます。

44 3秒遅延 5秒遅延 async指定

Slide 45

Slide 45 text

をasync属性で非同期化デモを見る ※ 14. JavaScriptをasync指定 45

Slide 46

Slide 46 text

はDOM構築をブロックしない Script-Injectによる非同期化の上位互換さらにDOM構築停止時のプリロード対象になるついでにCSSOM構築も待たない良いことずくめしかしインライン<script>は非同期化できない問題 <script>をasync属性で非同期化 46

Slide 47

Slide 47 text

インラインのを非同期化 ● async属性はインライン<script>に適用できない <!DOCTYPE html> <head> <meta charset="utf-8"> <link href="bold_3s.css" rel="stylesheet"> <script> (function() { setTimeout( function(){document.body.style.color = 'red'}, 5000 ) })(); インライン<script>によるDOM構築ブロック

この文章は「3秒後」に表示される。

「8秒後（表示から5秒後）」に文字色が赤に変化する。

47 3秒遅延 5秒後にフォントを赤に変更

Slide 48

Slide 48 text

インラインのを非同期化デモを見る ※ 16. インライン<script>によるDOM構築ブロック 48

Slide 49

Slide 49 text

インラインのJavaScriptでもCSSOM構築を待つ 1. CSS読み込み ⇒ CSSOM構築待ち 2. インラインこの順で登場するとCSSOM構築が完了するまで JavaScript実行とDOM構築がブロックされるインラインの<script>を非同期化 49

Slide 50

Slide 50 text

インラインのを非同期化 ● srcにデータURLで指定することでasyncを有効化 ● data:text/javascript, に続けてJavaScriptコードをエスケープした文字列を貼り付け ● エスケープはJavaScriptならencodeURI() <!DOCTYPE html> <head> <meta charset="utf-8"> <link href="bold_3s.css" rel="stylesheet"> <script async src="data:text/javascript,(function()%7BsetTimeout(function()%7Bdo⏎ cument.body.style.color='red'%7D,5000)%7D)()"> インライン<script>の非同期化

この文章は「3秒後」に表示される。

「5秒後（表示から2秒後）」の文字色が赤に変化する。

50 3秒遅延インラインJavaScriptをデータURLに変換 ※実際には空白なしで1行

Slide 51

Slide 51 text

インラインのを非同期化デモを見る ※ 17. インライン<script>の非同期化 51

Slide 52

Slide 52 text

インラインも遅延原因になる実行にはCSSOMの完全な構築が必要可能な限り非同期化しましょうもしくは CSS読み込み前に<script>を移動するだけでもOK インラインの<script>を非同期化 52

Slide 53

Slide 53 text

まとめ 53

Slide 54

Slide 54 text

まとめ ● HTML転送 ≠ DOM構築 = 画面表示 ● はDOM構築をブロックする ● CSSOM構築完了までレンダリングをブロックする ※ただし<head>内で読み込んだCSSのみ ● 画面表示は2つの鍵が必要 ○ DOM構築（部分的な構築でもOK） ○ <head>内のCSSOMを完全に構築済 ● JavaScript実行はCSSOM構築を待つ ● インラインJavaScriptでもCSSOM構築を待つ 54

Slide 55

Slide 55 text

最後に 55

Slide 56

Slide 56 text

56 https://www.raccoon.ne.jp/company/recruit/index.html

Slide 57

Slide 57 text

ご清聴ありがとうございました。 https://www.raccoon.ne.jp/company/recruit/index.html