遅延読み込み

遅延読み込み（非同期読み込みとも呼ばれる）は、コンピュータプログラミング、特にウェブデザインやウェブ開発において、オブジェクトの初期化を必要になるまで延期する手法である。適切に使用すれば、プログラムの動作効率を高めることができる。そのため、ウェブページのように、ネットワークコンテンツにアクセスし、初期化時間を最小限に抑える必要があるユースケースには最適である。例えば、ウェブページ上の画像の表示を必要になるまで延期することで、ウェブページの初期表示を高速化できる。遅延読み込みの反対は、積極的読み込みである。[1]

例

ウェブフレームワークを使用

Web 標準として確立される前は、遅延読み込みを実装するためにWeb フレームワークが一般的に使用されていました。

その一つがAngularです。遅延読み込みは帯域幅とサーバーリソースを削減するため、ウェブサイトへの実装に有力な選択肢となります。特に、ページの読み込み遅延を短縮することでユーザー維持率を向上させ、検索エンジン最適化（SEO）の向上にもつながります。[2]

以下は、Farata Systems [3]のTypeScriptでプログラムされたAngularでの遅延読み込みの例です。

@ NgModule ({ imports : [ BrowserModule , RouterModule . forRoot ([ { path : '' , component : HomeComponent }, { path : 'product' , component : ProductDetailComponent },             { path : 'luxury' 、loadChildren : () => import ( './luxury.module' ) .then ( m => m . LuxuryModule )、data : { preloadme : true } } ] // 、 {preloadingStrategy: CustomPreloadingStrategy} ) ]、declarations : [ AppComponent 、HomeComponent 、ProductDetailComponent ]、providers : [{ provide : LocationStrategy 、useClass : HashLocationStrategy }、CustomPreloadingStrategy ]、bootstrap : [ AppComponent ] })

ウェブ標準として

2020年以降、主要なウェブブラウザはデフォルトで遅延読み込みのネイティブ処理を有効にしています。[4] [5]

これにより、 HTML 属性を追加することで、遅延読み込みを Web ページに組み込むことができます。

属性はと のloading2つの値をサポートします。[6]値を に設定すると、必要なときだけリソースが取得されます（ユーザーがスクロールダウンして画像がスクロールして表示されるときなど）。一方、 に設定するとデフォルト状態となり、リソースはすぐに読み込まれます。lazyeagerlazyeager

<!-- これらのリソースはすぐに読み込まれます --> < img  src = "header_image.jpg" > < img  src = "header_image2.jpg"  loading = "eager" ><!-- これらのリソースは遅延ロードされます --> < img  src = "article_image.jpg"  alt = "..."  loading = "lazy" >  < iframe  src = "video-player.html"  title = "..."  loading = "lazy" ></ iframe >

方法

遅延ロード設計パターンを実装する一般的な方法は4つあります。遅延初期化、仮想プロキシ、ゴースト、値ホルダーです。[7]それぞれに長所と短所があります。

遅延初期化

遅延初期化では、オブジェクトは最初に に設定されますnull。

オブジェクトが要求されるたびにオブジェクトがチェックされ、オブジェクトが要求された場合はnull、オブジェクトが直ちに作成されて返されます。

たとえば、ウィジェットの遅延読み込みは、C#プログラミング言語では次のように実装できます。

プライベートint _myWidgetID ;プライベートWidget _myWidget = null ;      パブリックウィジェットMyWidget {取得{ if ( _myWidget == null ) { _myWidget = Widget.Load ( _myWidgetID ) ; }​              _myWidgetを返します。

あるいは、ヌル結合代入演算子を使うと ??=

プライベートint _myWidgetID ;プライベートWidget _myWidget = null ;      パブリックウィジェットMyWidget { get => _myWidget ??= Widget . Load ( _myWidgetID ); }

このメソッドは実装が最も簡単ですが、 が正当な戻り値である場合は、初期化されていないことを示すプレースホルダオブジェクトを使用する必要があるかもしれません。このメソッドをマルチスレッドアプリケーションnullで使用する場合は、競合状態を回避するために同期を使用する必要があります。

仮想プロキシ

仮想プロキシは、実オブジェクトと同じインターフェースを持つオブジェクトです。仮想プロキシのメソッドのいずれかが初めて呼び出されると、実オブジェクトが読み込まれ、その後委譲されます。

おばけ

ゴーストとは、部分的に読み込まれるオブジェクトです。最初はオブジェクトの識別子のみを含む場合もありますが、プロパティのいずれかに初めてアクセスされた際に、自身のデータを読み込みます。例えば、ユーザーがオンラインフォームからコンテンツをリクエストしようとしているとします。作成時点では、コンテンツがアクセスされるという情報しかなく、具体的なアクションとコンテンツは不明です。

PHPの例:

$userData  = 配列 (  "UID"  =  >  uniqid (),  "requestTime"  =>  microtime ( true ),  "dataType"  =>  "" ,  "request"  =>  "" );if  ( isset ( $_POST [ 'data' ])  &&  $userData )  {  // ... }

価値保持者

値ホルダーは、遅延読み込み動作を処理する汎用オブジェクトであり、オブジェクトのデータ フィールドの代わりに表示されます。

プライベートValueHolder < Widget > valueHolder ;  パブリックウィジェットMyWidget => valueHolder . GetValue ();

参照

参考文献

  1. ^ 「Lazy Loadingとは | Lazy LoadingとEager Loadingの違い | Imperva」ラーニングセンター。 2022年2月2日閲覧。
  2. ^ 「遅延読み込みとは? SEO のための遅延読み込みを理解する」。
  3. ^ Fain, Y., Moiseev, A. (2018). Angular開発 with TypeScript 第2版. 12月 ISBN 9781617295348。
  4. ^ 「画像とフレームのネイティブ遅延読み込みの詳細」2019年5月15日。
  5. ^ 「Firefox 75、画像とiframeの遅延読み込みをサポート」2020年2月15日。
  6. ^ 「遅延読み込み - Webパフォーマンス | MDN」。developer.mozilla.org . 2022年3月15日閲覧。
  7. ^ Martin Fowler (2003). 『エンタープライズ・アプリケーション・アーキテクチャのパターン』 Addison-Wesley. pp.  200– 214. ISBN 0-321-12742-0。
  • 遅延読み込み、Mozilla Developer Network
  • URL、WHATWG HTML 標準
  • JS 遅延読み込み


スタブアイコン

このコンピュータプログラミング関連の記事はスタブです。この記事を充実させることで、Wikipedia に貢献できます。

「https://en.wikipedia.org/w/index.php?title=Lazy_loading&oldid=1324650611」より取得