CINXE.COM

<!DOCTYPE html> <html data-auth="" data-permalink="1" itemscope itemtype="http://schema.org/BlogPosting" lang=ja> <head> <meta charset=utf-8> <title>h2o での server-push タイミングの最適化 | tech - 氾濫原</title> <meta content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes" name=viewport> <meta content=#000000 name=theme-color> <link href=/feed rel=alternate title=Feed type=application/atom+xml> <link href="https://lowreal.net/2016/04/18/1" rel=canonical> <meta content=unsafe-url name=referrer> <meta content="h2o での server-push タイミングの最適化 | tech - 氾濫原" property=og:title> <meta content="article" property=og:type> <meta content="https://lowreal.net/2016/04/18/1" property=og:url> <meta content="/images/entry/2016-04-18" property=og:image> <meta content=cho45@lowreal.net property=og:email> <meta content=cho45 property=fb:admins> <link href="/css/style.css" rel=stylesheet> <link href="/css/github.css" rel=stylesheet> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel=stylesheet> <link href="/api/similar?id=20677&" rel=preload as=fetch crossorigin id=preload-similar-entries> <link href="/api/exif?id=20677&" rel=preload as=fetch crossorigin id=preload-exif-entries>   <script defer src="/js/daterelative.js"></script> <script defer src="/js/balancetext/tinysegmenter.js"></script> <script defer src="/js/balancetext/balance.js"></script> <script defer src="/js/abcjs_basic_5.1.1-min.js"></script> <script defer src="/js/nogag.js"></script> </head> <body> <header id=global-header> <h1 id=header> <a href=/ > <img alt="h2o での server-push タイミングの最適化 | tech - 氾濫原" height=50 src=/images/hanrangen.svg width=60 style=margin:auto;display:block> </a> </h1> </header> <nav id=global-navigation> <ul> <li><a href=/ >最新</a></li> <li><a href=/photo/ >写真</a></li> <li><a href=https://www.lowreal.net/ >誰？</a></li> </ul> </nav> <div id=content> <div class=entries> <div class=date><a href="/2016/04/18/">2016年 04月 18日</a></div> <article class="tech status-public" data-id="20677" id="post-1460911950" > <header> <h2 itemprop=name><a href="/2016/04/18/1" class=bookmark rel=bookmark itemprop=url>h2o での server-push タイミングの最適化</a></h2> <div class=metadata> <a href="/tech/"><span itemprop=keywords>tech</span></a> | <time datetime="2016-04-17T16:52:30Z" data-epoch="1460911950" itemprop=datePublished> 01:52 </time> | <div style=display:none> <meta content="/2016/04/18/1" itemprop=mainEntityOfPage itemscope itemtype=https://schema.org/WebPage> <span itemprop=headline>h2o は mruby ハンドラで link ヘッダを使って push を指示すると、バックエンドへの問合せと非同期で静的…</span> <span itemprop=author itemscope itemtype=https://schema.org/Person> <a href=http://www.lowreal.net/ itemprop=url> <span itemprop=name>cho45</span> </a> </span> <div itemprop=publisher itemscope itemtype=https://schema.org/Organization> <div itemprop=logo itemscope itemtype=https://schema.org/ImageObject> <meta content=https://www.lowreal.net/images/logo.png itemprop=url> <meta content=189 itemprop=width> <meta content=105 itemprop=height> </div> <meta content=cho45 itemprop=name> </div> <meta content="2016-04-17T16:52:30Z" itemprop=datePublished> <meta content="2020-07-29T09:52:41Z" itemprop=dateModified> <div itemprop=image itemscope itemtype=https://schema.org/ImageObject> <meta content="/images/entry/2016-04-18" itemprop=url> <meta content=800 itemprop=width> <meta content=800 itemprop=height> </div> </div> </div> </header> <div class=content itemprop=articleBody> <p>h2o は mruby ハンドラで link ヘッダを使って push を指示すると、バックエンドへの問合せと非同期で静的ファイルを push してくれます。<p>もしバックエンドアプリケーションで link ヘッダを吐いて push する場合、バックエンドアプリケーションの処理が終わったあとから push が始まることになるので、アプリケーションの実行時間分、push できる時間を失うことになります。</p> <section class=level-1> <h3>server-push の指示をテンプレートに書きたい病</h3> <p>自分はプリロード指示をバックエンド側のテンプレートに書きたい病にかかっており、現状で以下のようなテンプレートコードを書いて、バックエンドから preload ヘッダを吐いています。<p> <span itemscope itemtype=http://schema.org/Photograph> <a class=picasa href=https://picasaweb.google.com/114431815111528304586/April182016#6274565888515360994 itemprop=url><img alt=photo itemprop=image src="/images/entry/2016-04-18 00.54.44.png"></a> </span> <p>r.preload() は link ヘッダを追加するメソッドになっており、これを実際に読みこんでいるHTMLの部分の近くに置くことでリソース管理を簡略化しています。<p>しかし、これだとバックエンドから h2o へ server-push を指示する形になるので、前述のようにアプリケーションの実行時間分、push できる時間を無駄にします。</p> </section> <section class=level-1> <h3>バックエンドから server-push するリストをあらかじめ取得する</h3> <p>できれば無駄をなくしたいので、やはり h2o の mruby ハンドラでも link ヘッダを吐くことにします。<p>ただ、二重に設定を書きたくはないので、バックエンドの吐く link ヘッダを、h2o 起動時に取得しておき、以降のリクエストではそれを元に server-push させるようにします。<p>まずバックエンドのヘッダをファイルに保存しておきます。ここでは適当に curl を使ってます。</p> <pre class=code>curl -s --head -H 'Cache-Control: no-cache' https://lowreal.net > /srv/www/lowreal.net.link.txt</pre> <p>そして、起動時に read して push する分の link ヘッダを作っておき、ハンドラでそれを送るように設定します。</p> <pre class="code lang-ruby hljs"> mruby.<span class=hljs-symbol>handler:</span> <span class=hljs-params>| LINK = File.read("/srv/www/lowreal.net.link.txt"). split(/\r?\n/).select{|</span>l<span class=hljs-params>| l.sub!(/^link: /, "") <span class=hljs-keyword>and</span> l.match(/rel=preload/) <span class=hljs-keyword>and</span> !l.match(/nopush/) }. join("\n") $stderr.puts LINK.inspect lambda <span class=hljs-keyword>do</span> |</span>env<span class=hljs-params>| [ 399, { "link" => LINK }, [] ] <span class=hljs-keyword>end</span></span></pre> <p>運用上は、適当なタイミング(デプロイタイミング)で curl を打って再度ヘッダを保存して h2o を再起動するようにします。<p>余談ですが curl を使わずとも mruby ハンドラ内で使える http_request() があるので h2o で完結しそうと思いきや、起動中のコンテキストでは使えないみたいです。</p> </section> <section class=level-1> <h3>効果</h3> <p>mruby ハンドラで server-push を指示しない場合<p> <span itemscope itemtype=http://schema.org/Photograph> <a class=picasa href=https://picasaweb.google.com/114431815111528304586/April18201602#6274566413223898786 itemprop=url><img alt=photo itemprop=image src="/images/entry/2016-04-18 01.37.31.png"></a> </span> <p>mruby ハンドラで server-push を指示する場合<p> <span itemscope itemtype=http://schema.org/Photograph> <a class=picasa href=https://picasaweb.google.com/114431815111528304586/April18201603#6274566507523155394 itemprop=url><img alt=photo itemprop=image src="/images/entry/2016-04-18 01.38.06.png"></a> </span> <p>見るべきは、各リソースの responseEnd の時間と、 / に対する requestStart の時間の差です。ただ requestStart はいずれも 1ms 程度なので、注目するのは responseEnd だけで良さそうです。<p>mruby ハンドラで指示しない場合各リソースの responseEnd は100ms以上になっています。これはバックエンドの処理に約100msほどかかっているからです。一方 mruby ハンドラで指示する場合、responseEnd は 22ms ぐらいになっています。<p>この例だと、静的ファイルの responseEnd から、バックエンドのレスポンス開始までまだ時間があるので、もっと静的ファイルを server-push する余地がありそうです。<p>('cache-control: no-cache' をつけているのはバックエンド側のキャッシュを無効にして処理時間を作って差をわかりやすくしているだけです)</p> </section> <ol itemscope itemtype=http://schema.org/BreadcrumbList><li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem><a href=/ itemprop=item><span itemprop=name>トップ</span></a> <meta content=1 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="/tech/" itemprop=item><span itemprop=name>tech</span></a> <meta content=2 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="https://lowreal.net/2016/04/18/1" itemprop=item><span itemprop=name>h2o での server-push タイミングの最適化</span></a> <meta content=3 itemprop=position> </li> </ol> </div> <div class="content trackbacks"> <h3>このエントリを参照するエントリ</h3> <ul> <li data-id="20988"> <a href="/2016/12/31/1"> <b>今年やったことを自分で承認する</b><br> <span class=summary>日記を読みかえしてみたら今年もいろいろやっていた。年末にせめて自分で自分を承認してあげたい。おおまかには高周波関係アンテナアナライザ製作…</span> <time datetime="2016-12-30T15:04:32Z" data-epoch="1483110272" itemprop=datePublished> 00:04 </time> </a> </li> </ul> </div> <div class="content similar-entries"> </div> <div class=social> <span class=hatena-star></span> <p class=share-buttons> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flowreal.net%2F2016%2F04%2F18%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Facebook","Share","https://lowreal.net/2016/04/18/1")' style=background:#3b5998 target=_blank> <img alt=Facebook height=18 src=/images/sharebuttons/FB-f-Logo__white_50.png width=18> </a> <a href="https://bsky.app/intent/compose?text=h2o%20%E3%81%A7%E3%81%AE%20server-push%20%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96%20https%3A%2F%2Flowreal.net%2F2016%2F04%2F18%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Bluesky","Share","https://lowreal.net/2016/04/18/1")' style=background:#efefef target=_blank> <img alt=Bluesky height=40 src=/images/bluesky_media_kit_logo_svgs.svg width=40> </a> <a href="http://b.hatena.ne.jp/add?url=https%3A%2F%2Flowreal.net%2F2016%2F04%2F18%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Hatena::Bookmark","Share","https://lowreal.net/2016/04/18/1")' style=background:#00a4de target=_blank> <img alt=はてなブックマーク height=40 src=/images/sharebuttons/hatenabookmark-logomark.svg width=40> </a> </p> </div> </article> </div> <div class=pager> <a href="/2016/04/17/2" rel=next>◀ [tech] Firefo…</a> <a href="/2016/04/18/">▲ この日のエントリ</a> <a href="/2016/04/18/2" rel=prev>[tech] h2o の… ▶</a> </div> </div> <footer id=global-footer> <h2>書いている人</h2> <div class=author> <div class=image> <img alt=Photo height=160 src=/images/profile.jpg width=160 loading=lazy> </div> <div class=desc> <p> cho45 (<a href=https://www.lowreal.net/ rel=author>www.lowreal.net</a>) <<a href=mailto:cho45@lowreal.net>cho45@lowreal.net</a>> </p> <p> JavaScript, Perl, Ruby, HTML, CSS, Web etc </p> <p> <a href=https://github.com/cho45 rel=nofollow class="button github-button" onclick='ga("send","social","GitHub","Follow","cho45")'><i></i> <span class=label> Follow <b>@cho45</b> </span> </a> </p> <p> <a href=/archive>アーカイブ</a> </p> </div> </div> </footer>