遅延読み込み

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

その一つがAngularです。遅延読み込みは帯域幅とサーバーリソースを削減するため、特にページの読み込み時の遅延を減らすことでユーザーの定着率を向上させ、検索エンジン最適化（SEO）も改善する可能性があるため、Webサイトに実装する有力な候補です。^{[ 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属性を追加することで、ウェブページに遅延読み込みを組み込むことができます。

このloading属性は 2 つの値と をサポートしていますlazy。eager[ ^{6 ]値}を に設定すると、lazyリソースは必要なとき (ユーザーがスクロールダウンしたときに画像が表示されるときなど) にのみ取得されますが、eagerデフォルトの状態である に設定すると、リソースはすぐにロードされます。

\n\n\n\n \n\n"}}">

<!-- これらのリソースはすぐに読み込まれます --> < 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 >

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

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

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

private int _myWidgetID ; private Widget _myWidget = null ;public Widget MyWidget { get { if ( _myWidget == null ) { _myWidget = Widget . Load ( _myWidgetID ); }return _myWidget ; } }

あるいは、ヌル合体代入演算子を使用する??=

private int _myWidgetID ; private Widget _myWidget = null ;public Widget MyWidget { get => _myWidget ??= Widget . Load ( _myWidgetID ); }

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

仮想プロキシとは、実オブジェクトと同じインターフェースを持つオブジェクトです。そのメソッドが最初に呼び出されると、実オブジェクトをロードしてから処理を委譲します。

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

PHPの例：

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

A value holder is a generic object that handles the lazy loading behavior, and appears in place of the object's data fields:

privateValueHolder<Widget>valueHolder;publicWidgetMyWidget=>valueHolder.GetValue();