<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>V8 &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/v8/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>JSエンジン「V8」はバージョン6で世代移行を終える ── Google I/O 2017レポート</title>
		<link>/furoshiki/23289/</link>
		<pubDate>Tue, 12 Sep 2017 01:00:47 +0000</pubDate>
		<dc:creator><![CDATA[川田寛]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Google I/O 2017]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[V8]]></category>

		<guid isPermaLink="false">/?p=23289</guid>
		<description><![CDATA[連載： Google I/O 2017特集 (3)ChromeやNode.jsで利用されているJavaScriptエンジン「V8」に、8年の歴史の中でも大きな変化が訪れました。8月3日にリリースされたバージョン6.1で、...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/google-io-2017/" class="series-450" title="Google I/O 2017特集" data-wpel-link="internal">Google I/O 2017特集</a> (3)</div><p>ChromeやNode.jsで利用されているJavaScriptエンジン「V8」に、8年の歴史の中でも大きな変化が訪れました。8月3日にリリースされたバージョン6.1で、数年かけて進めてきたJavaScriptコンパイラーが世代交代を終えました。詳しい話は、<a href="https://v8project.blogspot.jp/2017/08/v8-release-61.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">V8のブログでも語られていますが</a>、ここでは大きなトピックであるコンパイラーの世代交代についてお話します。</p>

<p>なお、この動きについては、<a href="https://www.youtube.com/watch?v=r5OWCtuKiAk" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">昨年に開かれたカンファレンス「BlinkOn 6」でも語られており</a>、Google I/O 2017でも、Seth Thompsonによるセッション「<a href="https://events.google.com/io/schedule/?section=may-18&amp;sid=06ad955b-2387-45b8-9a5b-9ebd00a6f952&amp;gclid=CKuXh-a6g9QCFVR9vQodz50B6g" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">V8, Advanced JavaScript, &amp; the next performance frontier</a>」によって紹介されています。本記事では、これらの発表内容を補足してご紹介します。</p>

<p><img src="/wp-content/uploads/2017/05/top.png" alt="" width="640" height="439" class="alignnone size-full wp-image-23339" srcset="/wp-content/uploads/2017/05/top.png 640w, /wp-content/uploads/2017/05/top-300x206.png 300w, /wp-content/uploads/2017/05/top-207x142.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h1>V8のミッションとは？</h1>

<p>Chromeで使われているJavaScriptエンジン「V8」ですが、そのミッションはとてもシンプルです。</p>

<p>「Speed up real-world performance for modern JavaScript, and enable developers to build a faster future web.(実世界での要求にあわせてモダンなJavaScriptのパフォーマンスを向上させること。そして、今後の変化していくWebに早く追従し、開発者がそれらをビルドできるようにすること)」</p>

<h1>V8のパフォーマンス改善につきまとう2つのトレードオフ</h1>

<p>V8とはなんでしょう？JIT(just-in-time compile)で動作させることができるJavaScriptのエンジンです。ブラウザがJavaScriptを受け取ると、ブラウザはそのコードをトランスレートして実行したり。また、コードを翻訳してコンピューターが理解できるネイティブコードにコンパイルしてから実行します。</p>

<p>ただ、そこにはいくつかのトレードオフが存在します。</p>

<ol>
<li>コンパイルして生成されたネイティブコードは、実行されるピーク時の速度が早い一方で、コードの量が多いほど、最初に実行されるまでに遅延が発生する。一方で、トランスレーターを使った場合は、実行されるまでの遅延は小さいけど、実行時の速度が遅い。</li>
<li>JavaScriptエンジンは、パフォーマンスを良くしようとするとメモリの消費量が多くなる。一方で、省メモリを進めようとするとパフォーマンスは悪化する。</li>
</ol>

<p>例えば、以下のような一行のfunctionを呼び出すコードについて考えてみましょう。</p>

<p><img src="/wp-content/uploads/2017/05/02-1.png" alt="" width="640" height="330" class="alignnone size-full wp-image-23350" srcset="/wp-content/uploads/2017/05/02-1.png 640w, /wp-content/uploads/2017/05/02-1-300x155.png 300w, /wp-content/uploads/2017/05/02-1-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>このコードでは、 <code>function foo()</code> は一度しか呼び出されていませんよね。このケースでは、実行されるまでの速さ（Fast Startup）を重視し、実行時のパフォーマンス（Peak Perf）は重要視しません。</p>

<p>しかし、以下のケース。</p>

<p><img src="/wp-content/uploads/2017/05/03-1.png" alt="" width="640" height="350" class="alignnone size-full wp-image-23352" srcset="/wp-content/uploads/2017/05/03-1.png 640w, /wp-content/uploads/2017/05/03-1-300x164.png 300w, /wp-content/uploads/2017/05/03-1-207x113.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>1万回も <code>function foo()</code> を呼び出しています。このケースでは、Fast Startupが遅れてでも、Peak Perfを重視する必要がでてきます。 <code>foo()</code> はネイティブコードにコンパイルされていなくてはいけません。そしてそれがデスクトップ型のコンピューターであれば、メモリも潤沢なので、大量のメモリ消費を犠牲にネイティブコードをさらに幾度に渡り最適化させます。</p>

<p>ただ、これはあくまでデスクトップ型コンピューターの場合。同じ1万回 <code>foo()</code> を呼び出すコードであっても、モバイルの場合は同じアプローチにはなりません。Androidデバイスはモバイルなので、デスクトップと同じようにメモリを扱うことはできません。</p>

<p><img src="/wp-content/uploads/2017/05/04.png" alt="" width="640" height="428" class="alignnone size-full wp-image-23356" srcset="/wp-content/uploads/2017/05/04.png 640w, /wp-content/uploads/2017/05/04-300x201.png 300w, /wp-content/uploads/2017/05/04-207x138.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>ネイティブのコードへコンパイルはされますが、メモリの消費量は抑えられるよう最適化は制限されます。</p>

<p>別のパターンについても考えてみましょう。それが以下のコード。</p>

<p><img src="/wp-content/uploads/2017/05/05.png" alt="" width="640" height="399" class="alignnone size-full wp-image-23358" srcset="/wp-content/uploads/2017/05/05.png 640w, /wp-content/uploads/2017/05/05-300x187.png 300w, /wp-content/uploads/2017/05/05-207x129.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>これはNode上で実行されているコードです。一度起動されたら、ずっと利用されるわけですから、当然、Fast Startupを犠牲にしてPeak Perfを改善しようとしますね。しかし…</p>

<p><img src="/wp-content/uploads/2017/05/06.png" alt="" width="640" height="397" class="alignnone size-full wp-image-23360" srcset="/wp-content/uploads/2017/05/06.png 640w, /wp-content/uploads/2017/05/06-300x186.png 300w, /wp-content/uploads/2017/05/06-207x128.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>IoTデバイス上で動作するとなると、同じ状況とは言えません。サーバー用マシンとは異なり、メモリ消費は抑えなくてはいけません。Peak Perfを上げるようにはしますが、それはメモリ消費が少なくて済むようなアプローチで進めます。</p>

<p>同じ一行のfunction呼び出しであっても、その最適化方法は無数にあり、コンテキストやデバイスの状況に強く依存するのです。そしてそれは、Fast Startupなのか、あるいはPeak Perfに最適化していくのか、メモリを富豪的に扱うのか、それとも小さくなるよう努力するのか、解決しなくてはいけません。</p>

<h1>8年前のリリース時点から全てが変わろうとしているV8</h1>

<p>V8エンジンは、ここまでに説明したあらゆる状況で最適化できるようにしたり、また新しいパターンのJavaScript（asm.js, WebAssembly等）に対応できるよう、2〜3年かけて実行パイプラインを作り変えました。</p>

<p>過去の変遷を見てみると。</p>

<p>2008年のリリース時点の段階では、シンプルなコードジェネレーターがあって、そこからやや最適化を行ったマシンコードが生成されるだけでした。あらゆるJavaScriptのコードは、この仕組を使って実行されます。</p>

<p>ただ、最適化には計算が必要なため、コードを実行できる状態にするまでに多くの時間を要します。大量のJavaScriptコードを扱う場合は、Startup Time短縮するために最適化の処理をスキップすることが求められます。</p>

<p><img src="/wp-content/uploads/2017/06/c01.png" alt="" width="640" height="295" class="alignnone size-full wp-image-23697" srcset="/wp-content/uploads/2017/06/c01.png 640w, /wp-content/uploads/2017/06/c01-300x138.png 300w, /wp-content/uploads/2017/06/c01-207x95.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>2010年にコンパイラ「Crankshaft」が追加されます。計算コストの高い最適化処理を分離し、Crankshaftにその責務が委譲されました。コードの生成だけであれば、Full-codegenは最小のコストでマシンコードを吐き出すため高速なため、Startup Timeが最適化されます。そして、CrankShaftを使ってコンパイルすれば、計算コストを犠牲にPeak Perfにとって最適なマシンコードが生成されます。</p>

<p>実行時に、CrankShaftが吐き出したコードを、Full-codegenが吐き出したコードへ置き換えることで最適化を図ります。</p>

<p><img src="/wp-content/uploads/2017/06/c03.png" alt="" width="640" height="328" class="alignnone size-full wp-image-23698" srcset="/wp-content/uploads/2017/06/c03.png 640w, /wp-content/uploads/2017/06/c03-300x154.png 300w, /wp-content/uploads/2017/06/c03-207x106.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>2015年。Crankshaftには限界が来ます。JavaScriptの仕様そのものが大きく変化する時代になりましたが、Crankshaftはその設計上、JavaScriptの機能をサポートしきれず、また新しいパターンのJavaScript（asm.js, WebAssembly等）にも十分に対応できませんでした。当時のフロントエンドエンジニアなら、V8のECMAScript標準への対応の遅れに苛立ちを感じたはずです。</p>

<p>V8開発チームは、それを改善しようと新たなコンパイラ「TurboFan」を追加します。</p>

<p><img src="/wp-content/uploads/2017/06/c04.png" alt="" width="640" height="326" class="alignnone size-full wp-image-23699" srcset="/wp-content/uploads/2017/06/c04.png 640w, /wp-content/uploads/2017/06/c04-300x153.png 300w, /wp-content/uploads/2017/06/c04-207x105.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>2016年。「Ignition」と呼ばれる仕組みを追加しました。Ignitionには、ソースコードをいきなりマシンコードにするのではなく、バイトコード(マシンコードほどハードウェアに依存しない「中間コード」と呼ばれるもの)を生成するコンパイラーと、それを実行するインタプリターが内包されています。</p>

<p>そして、TurboFanはバイトコードを扱う形へと作り変えられました。そして現在、最新のVersionである5.9では、この2つの仕組みは既に使われていません。内部にコードこそ存在していますが、バイトコードの生成と解釈するインタープリターIgnitionと、PeakPerfを改善するための処理をするコンパイラーTurboFanだけで動作しているという状況です。</p>

<p><img src="/wp-content/uploads/2017/06/c05.png" alt="" width="640" height="325" class="alignnone size-full wp-image-23701" srcset="/wp-content/uploads/2017/06/c05.png 640w, /wp-content/uploads/2017/06/c05-300x152.png 300w, /wp-content/uploads/2017/06/c05-207x105.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>そして、これからまもなくリリースされる6.0では、コードとして完全にV8から削除されます。</p>

<p><img src="/wp-content/uploads/2017/06/c06.png" alt="" width="640" height="312" class="alignnone size-full wp-image-23702" srcset="/wp-content/uploads/2017/06/c06.png 640w, /wp-content/uploads/2017/06/c06-300x146.png 300w, /wp-content/uploads/2017/06/c06-207x101.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h3>「Ignition Interpreter」とは？</h3>

<p>中間コードを生成して実行するインタプリター。メモリ消費が小さく動く、Fast Startupも最適という特徴があります。</p>

<ul>
<li>モバイルなどのメモリの小さな環境で動かすのに最適。</li>
<li>Startup Timeに最適化すべきコードの実行に向いている。</li>
<li>TurboFanと組み合わせることで、実行速度を最適化できる。</li>
</ul>

<h3>「TurboFan」とは？</h3>

<p>主として、最適化を行うことを目的としたコンパイラー。</p>

<ul>
<li>使われ方としては、拡張的な感じ。ただ、あらゆる新しいJavaScript機能に対応していき、その場合も活用される。</li>
<li>WebAssemblyのバックエンドでもある。</li>
<li>最近はtry/catch/finallyとか、ES2015+の最適化が可能になった。</li>
</ul>

<h1>まとめ</h1>

<p>V8について、メモリ管理向けガーベジコレクター「Orinoco」など、さまざまな技術要素が進化し、語り尽くせないほどのトピックがあるのですが、それはまた別の機会にお話しましょう。TurboFanへの完全移行、実態としてすでにほとんど終わった状況といっても過言ではありませんが、8年前とは全く異なる、Web・JavaScriptの変化に追従する大きな変化です。今後も楽しみですね。</p>
]]></content:encoded>
		
		<series:name><![CDATA[Google I/O 2017特集]]></series:name>
	</item>
	</channel>
</rss>
