Chrome 60 の新機能

  • Paint Timing API を使用すると、Paint Timings AP を使用して、初回ペイントまでの時間と初回のコンテンツ ペイントまでの時間を測定できます。
  • font-display を使用すると、ダウンロード前にフォントのレンダリング方法を制御できます。
  • WebAssembly をリリース
  • 他にもたくさんの機能があります。

変更内容の完全なリストについては、Chromium ソース リポジトリの変更リストを確認する

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

ペイント タイミング API

ユーザーがウェブページに移動すると、すべてが機能していることをユーザーが確認できるように、視覚的なフィードバックが求められます。新しいペイントタイミング API では これを測定できます

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

  • Time to First Paint - ブラウザが何かのレンダリングを開始する時点(画面上のコンテンツの最初の部分)をマークします。
  • Time to First Contentful Paint - ブラウザが DOM、テキスト、画像などのコンテンツの最初のビットをレンダリングするポイントをマークします。

これらの指標を追跡し、エクスペリエンスの向上に使用する方法については、ユーザー エクスペリエンスに最も影響を与えるパフォーマンス指標を活用するをご覧ください。

CSS font-display プロパティ

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

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

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

サポートは Chrome 60 と Opera で、Firefox で開発中です。 詳しくは、font-display を使用したフォント パフォーマンスの制御をご覧ください。

WebAssembly

Web Assembly(Wasm)は、C や C++ などの言語で記述されたコードをウェブ上でほぼネイティブな速度で実行するための新しい方法です。

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

デモ、ドキュメント、利用方法などの詳細については、webassembly.org をご覧ください。

その他

  • 新しい Web Budget API を使用すると、プッシュ通知の権限を持つサイトは、ユーザーに見える通知を表示しなくても、データの同期や通知の消去などのバックグラウンド処理をトリガーする限られた数のプッシュ メッセージを送信できます。
  • PushSubscription.expirationTime を利用できるようになりました。これにより、定期購入の有効期限が切れるタイミングとかどうかをサイトに通知します。
  • オブジェクトの残りと拡散のプロパティがサポートされるようになりました。これにより、オブジェクトの結合とシャロー クローンの作成、さまざまな不変のオブジェクト パターンの実装が簡単になりました。

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

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

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

Chrome 61 がリリースされたら すぐにお知らせします