Ленивая загрузка (также известная как асинхронная загрузка ) — это метод, используемый в компьютерном программировании , особенно в веб-дизайне и веб-разработке , для отсрочки инициализации объекта до тех пор, пока он не понадобится. Он может повысить эффективность работы программы, если используется правильно и надлежащим образом. Это делает его идеальным в случаях, когда осуществляется доступ к сетевому контенту, а время инициализации должно быть сведено к минимуму, например, в случае веб-страниц . Например, отсрочка загрузки изображений на веб-странице до тех пор, пока они не понадобятся для просмотра, может ускорить первоначальное отображение веб-страницы. Противоположностью ленивой загрузки является жадная загрузка . [1]
До того, как стать веб-стандартом, веб-фреймворки обычно использовались для реализации отложенной загрузки.
Одним из них является Angular . Поскольку ленивая загрузка снижает пропускную способность и, следовательно, ресурсы сервера, это сильный претендент для внедрения на веб-сайте, особенно для улучшения удержания пользователей за счет уменьшения задержки при загрузке страницы, что также может улучшить поисковую оптимизацию (SEO). [2]
Ниже приведен пример использования ленивой загрузки в Angular, запрограммированный на TypeScript от Farata Systems [3]
@ 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} ) ], объявления : [ AppComponent , HomeComponent , ProductDetailComponent ], поставщики : [ { provide : LocationStrategy , useClass : HashLocationStrategy }, CustomPreloadingStrategy ], bootstrap : [ AppComponent ] }) С 2020 года основные веб-браузеры по умолчанию включили собственную обработку отложенной загрузки. [4] [5]
Это позволяет включить отложенную загрузку в веб-страницу путем добавления атрибутов HTML .
Атрибут loadingподдерживает два значения: lazyи eager. [6] Установка значения lazyприведет к извлечению ресурса только тогда, когда это необходимо (например, когда изображение прокручивается в поле зрения, когда пользователь прокручивает страницу вниз), а установка его в значение eager, состояние по умолчанию, приведет к немедленной загрузке ресурса.
<!-- Эти ресурсы будут загружены немедленно --> < 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 >Существует четыре распространенных способа реализации шаблона проектирования ленивой загрузки: ленивая инициализация , виртуальный прокси , призрак и держатель значения . [7] Каждый из них имеет свои преимущества и недостатки.
При ленивой инициализации объекту сначала присваивается значение null.
Всякий раз, когда запрашивается объект, он проверяется, и если это так null, то объект немедленно создается и возвращается.
Например, ленивую загрузку виджета можно реализовать на языке программирования C# следующим образом:
частный int _myWidgetID ; частный Widget _myWidget = null ; public Widget MyWidget { get { if ( _myWidget == null ) { _myWidget = Widget . Load ( _myWidgetID ); } вернуть _myWidget ; } } Или, в качестве альтернативы, с помощью оператора присваивания, объединяющего null ??=
частный int _myWidgetID ; частный Widget _myWidget = null ; public Widget MyWidget { get => _myWidget ??= Widget . Load ( _myWidgetID ); } Этот метод является самым простым в реализации, хотя если nullэто допустимое возвращаемое значение, может потребоваться использовать объект-заполнитель, чтобы сигнализировать, что он не был инициализирован. Если этот метод используется в многопоточном приложении , необходимо использовать синхронизацию, чтобы избежать состояний гонки .
Виртуальный прокси — это объект с тем же интерфейсом, что и реальный объект. При первом вызове одного из его методов он загружает реальный объект, а затем делегирует.
Призрак — это объект, который должен быть загружен в частичном состоянии. Изначально он может содержать только идентификатор объекта, но он загружает свои собственные данные при первом доступе к одному из его свойств. Например, предположим, что пользователь собирается запросить контент через онлайн-форму. На момент создания доступна только информация о том, что контент будет доступен, но конкретное действие и контент неизвестны.
Пример на PHP :
$userData = массив ( "UID" = > uniqid (), "requestTime" => microtime ( true ), "dataType" => "" , "request" => "" );if ( isset ( $_POST [ 'data' ]) && $userData ) { // ... }Держатель значения — это универсальный объект, который управляет поведением отложенной загрузки и появляется вместо полей данных объекта:
частный ValueHolder < Виджет > valueHolder ; public Widget MyWidget => valueHolder . GetValue ();