Chrome 60 の新機能

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

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

ピート ルページです。では、Chrome 60 のデベロッパー向けの新機能を詳しく見ていきましょう。

ペイントタイミング API

ウェブページに移動すると、すべてが機能しているという安心感を得るために、視覚的なフィードバックに注目します。新しいペイントタイミング API では、これを測定できるようになりました。

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

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

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

CSS の font-display プロパティ

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

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

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

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

WebAssembly

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

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

webassembly.org ではデモ、ドキュメント、利用方法などをご覧いただけます。

など多数

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

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

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

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

Chrome 61 のリリース時に Chrome の新機能をお知らせします