Chrome 60 の新機能

  • Paint Timing API を使用すると、Paint Timings AP で First Paint までの時間と First Contentful Paint までの時間を測定できます。
  • font-display を使用すると、ダウンロード前にフォントのレンダリング方法を制御できます。
  • WebAssembly がリリースされました
  • 他にもさまざまな機能があります。

変更点の詳細なリストについては、Chromium ソース リポジトリの変更リストを確認する

Pete LePage と申します。Chrome 60 のデベロッパー向けの新機能について詳しく見てみましょう。

Paint timings API

ユーザーはウェブページにアクセスしたときに、すべてが正常に動作していることを安心して確認できる視覚的なフィードバックを求めています。新しい paint timings API を使用すると、これを測定できます。

この API は次の 2 つの指標を公開します。

  • Time to First Paint - ブラウザがレンダリングを開始した時点(画面上の最初のコンテンツ)を示します。
  • First Contentful Paint までの時間 - ブラウザが DOM から最初のコンテンツ(テキスト、画像など)をレンダリングした時点。

これらの指標をトラッキングしてエクスペリエンスを改善する方法については、ユーザー エクスペリエンスに最も影響するパフォーマンス指標を活用するをご覧ください。

CSS font-display プロパティ

ウェブフォントを使用すると、豊かなタイポグラフィを組み込むことができます。ただし、ユーザーがその書体を持っていない場合は、ダウンロードが必要になり、サイトの読み込みが遅くなる可能性があります。

幸い、ほとんどのブラウザでは、フォントがダウンロードに時間がかかりすぎると、フォールバックが使用されます。新しい font-display プロパティを使用すると、ダウンロード可能なフォントが完全に読み込まれる前にレンダリングされる方法を制御できます。

  • auto は、ユーザー エージェントが使用するフォント表示戦略を使用します。
  • block は、フォントフェイスに短いブロック期間と無限のスワップ期間を指定します。
  • swap は、フォントフェイスに 0 秒のブロック期間と無限のスワップ期間を指定します。
  • fallback は、フォントフェイスに非常に短いブロック期間と短いスワップ期間を指定します。
  • optional は、フォントフェイスに極めて短いブロック期間とゼロ秒のスワップ期間を指定します。

この機能は Chrome 60 と Opera でサポートされており、Firefox では現在開発中です。詳しくは、font-display によるフォント パフォーマンスの制御をご覧ください。

WebAssembly

WebAssembly(wasm)は、C や C++ などの言語で記述されたコードをネイティブに近い速度でウェブ上で実行する新しい方法を提供します。

ブラウザ内動画エディタの構築や、既存の標準ベースのウェブ プラットフォーム API を利用した Unity ゲームの高フレームレートでの実行に必要な速度を提供します。

デモ、ドキュメント、スタートガイドなど、詳細については webassembly.org をご覧ください。

その他

  • 新しい Web Budget API により、プッシュ通知の権限を持つサイトは、ユーザーに表示される通知を表示することなく、データの同期や通知の閉鎖などのバックグラウンド処理をトリガーするプッシュ メッセージを限定数送信できるようになります。
  • PushSubscription.expirationTime が利用可能になり、サブスクリプションの有効期限が切れる日時をサイトに通知できるようになりました。
  • オブジェクトの残り値とスプレッド プロパティがサポートされるようになりました。これにより、オブジェクトの統合とシャロー クローンを簡単に行え、さまざまな不変オブジェクト パターンを実装できるようになります。

注: Payment Request API が Chrome 61 にプッシュされました。

これらは、デベロッパー向け Chrome 60 の変更のほんの一部です。

YouTube チャンネルチャンネル登録すると、新しい動画が公開されるたびにメール通知が届きます。

担当の Pete LePage です。Chrome 61 がリリースされ次第、Chrome の新機能についてお知らせします。