BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース 高速なWebのためのAdaptive Loading

高速なWebのためのAdaptive Loading

原文(投稿日:2020/03/19)へのリンク

Google Chromeチームは、ネットワーク速度、CPU、メモリ、その他ウェブプラットフォームシグナルに基づいて、コンポーネントの最適なバージョンをロード・レンダリングするためのAdaptive Loadingを発表した。

Network Information API待望の機能だ。Chrome for Android、Firefox for Android、Chrome、Chromiumベースのデスクトップブラウザなどでサポートが始まっている。これは現在検討中の各種Adaptive Loadingパターンの1つにすぎない。他にも、バッテリーレベル、使用可能メモリ、デバイスの能力、ハードウェアの同時実行性などがある。

こうしたアプローチをReactコンポーネントで試してみたい人のために、Adaptive LoadingプロジェクトにはReact Adaptive Loading Hooks and Utilitiesも含まれている。

Chromeのチームがこうしたコンセプトを実験するのは初めてではない。たとえば、ソフトウェアエンジニアのTheodore Vorillas氏は、2019年はじめにAdaptive Component提供のためにNetwork Information APIの実験を始めているし、ソフトウェアエンジニアのNetanel Basal氏は、2018年後半にConnection-Aware Angularコンポーネントの検討を始めていた。

それぞれ、能力に基づいてエクスペリエンス提供のオプションを調べている。たとえば、Network-Aware Adaptiveメディアローダーは、コネクション速度(slow-2g、2g、3g、4g、default)を調べて、低速なコネクションに適した解像度の画像をロードするか、4G以上で動画をロードするかを判断できる。

let media;
switch (effectiveConnectionType) {
  case 'slow-2g':
    media = <img className='responsive' src={minResImage} alt='low resolution' />;
    break;
  case '2g':
    media = <img className='responsive' src={mediumResImage} alt='medium resolution' />;
    break;
  case '3g':
    media = <img className='responsive' src={maxResImage} alt='high resolution' />;
    break;
  case '4g':
    media = <video className='responsive' src={video} controls />;
    break;
  default:
    media = <video className='responsive' src={video} controls />;
    break;
}

 

Network Connection APIやBattery Status APIなどのパフォーマンスAPIが採用されるようになれば、パフォーマンスに適したエクスペリエンスを提供するアプリケーションがもっと作れるようになるはずだ。

2019 Chrome Developer SummitにおけるAdaptive-Loadingプロジェクトの紹介ビデオも公開されている。

Adaptive-Loadingプロジェクトはオープンソースソフトウェアであり、Apache 2ライセンスで利用可能だ。

この記事に星をつける

おすすめ度
スタイル

BT