2016年10月のブラウザ関連ニュースは、10月12日にリリースされたChrome 54の追加機能からCustom Elements v1、DevToolsのCPU Throttling、WebAssemblyについて紹介します。

Chrome 54リリース

10月12日に、Chrome 54がリリースされました。追加された機能のまとめは、ベータ版時点で公開されたポストが詳しいです。

• Google Developers Japan: Chrome 54 ベータ版：Custom Elements V1、BroadcastChannel、メディア プラットフォームの強化

以下、気になったものを取り上げます。

Custom Elements v1

54で実装された大きな機能としては、Custom Elements v1でしょう。Shadow DOM v1のときと同じように、Custom Elements仕様もベンダー間の合意をとりつけ前進した新しい仕様を「v1」と呼んでいます。現在Safariも実装を進めており、近くリリースされる新しいTechnology Previewで有効になるはずです。

Custom Elements v1での大きな変更点は、ES 2015のクラス構文を使いカスタム要素を定義するようになったことです。たとえば、hx-element というカスタム要素を定義する際には以下のようなコードで要素のコンストラクタを定義し、そのコンストラクタをもとに hx-element という要素名に登録します。

// カスタム要素のコンストラクタ
class HXElementCtor extends HTMLElement {
  // 要素が作成された段階に実行されるコールバック
  constructor () {
    super()
    // ...
  }
  // 要素がドキュメントに突っ込まれたとき
  connectedCallback () {
    // ...
  }
  // ...
}
// hx-element という名前でカスタム要素を登録
window.customElements.define('hx-element', HXElementCtor)

カスタム要素のコンストラクタには、「要素が作成された」「要素がドキュメントに追加された」「属性が変更された」などの状態に応じてコードを実行するためのライフサイクルコールバックと呼ばれる関数を記述します。くわしくはチュートリアルがWeb Fundamentalsで公開されているので、そちらをどうぞ。

• Custom Elements v1: Reusable Web Components

DevToolsのCPU Throttling

DevToolsでは、CPU Throttlingがサポートされました。CPUの速度を制限し、スマートフォンなどのパワフルでない環境での処理を模した状態でタイムラインを取得できます。

HTML5 Experts.jpのトップページで、タイムラインを録って比較してみました。

CPU Throttlingなしのオーバービュー

通常状態では、レイアウト関連処理（紫色）が3回、JavaScript関連処理（黄色）が3回、描画関連処理が1回、チャートの上端に達しています。この状態でもCPUをけっこう専有しているようです。

“5x slowdown”を指定し制限し読み込んだもの

CPU Throttolingで5分の1に制限したものではまず、ページ読み込みに倍近くの時間がかかっています。また、レイアウト関連処理やJavaScriptの処理時間が大幅に伸びており、別れていた山がくっついてしまっています。

と、このような感じでCPUの性能がレンダリングに及ぼす影響を確かめられます。気をつけないといけないのが、“2x slowdown”といったように使っているコンピューターのCPUをもとにした制限になってることです。ですので特定のプロセッサをエミュレートできるわけではありません。Network Throttlingよりも「あくまで目安」度合いが高そうです。

WebAssemblyがさらに進捗、ブラウザプレビュー段階に

10月31日に、WebAssemblyがブラウザプレビュー段階に入ったと、Mozilla, Google, Microsoftが発表しました。

• WebAssembly Browser Preview ★ Mozilla Hacks – the Web developer blog
• V8 JavaScript Engine: WebAssembly Browser Preview
• A peek into the WebAssembly Browser Preview | Microsoft Edge Dev Blog

WebAssemblyは3月に各ブラウザで試験実装が入ったのですが、今回はWebAssemblyのバイナリフォーマットがリリース候補段階になったこと、それにSpiderMonkeyとV8のナイトリービルド、Chakraの開発版が互換性のある形で対応した旨が発表されました。バイナリフォーマットがほぼ固まったため、このブラウザプレビュー段階では幅広いフィードバックを集めたいとのことです。

今後のWebAssemblyですが、公開されているロードマップによると、解決に時間のかかる問題が見つからなければ2017年第1四半期にはバイナリフォーマットの初期バージョンが策定完了するとのこと。そしてその時点で、ブラウザの実装をデフォルトで有効にするようです。Firefoxは52での有効化を試みているそうです。

なお、発表には加わっていないものの、WebKitでもJavaScriptCoreに実装中です。主要なエンジンすべてで実装されるので、ゲームや計算コストの大きなアプリケーションをWebに持ち込むのがさらに容易になりそうですね。