Carga diferida

Antes de ser establecidos como estándar web, los frameworks web se utilizaban generalmente para implementar la carga diferida.

Una de ellas es Angular . Dado que la carga diferida reduce el ancho de banda y, por consiguiente, los recursos del servidor, es una opción muy recomendable para implementar en un sitio web, especialmente para mejorar la retención de usuarios al reducir la demora en la carga de la página, lo que también puede mejorar el posicionamiento en buscadores (SEO). ^{[ 2 ]}

A continuación se muestra un ejemplo de carga diferida utilizada en Angular, programada en TypeScript , de 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} ) ], declarations : [ AppComponent , HomeComponent , ProductDetailComponent ], providers : [{ provide : LocationStrategy , useClass : HashLocationStrategy }, CustomPreloadingStrategy ], bootstrap : [ AppComponent ] })

Desde 2020, los principales navegadores web han habilitado de forma predeterminada el manejo nativo de la carga diferida. ^{[ 4 ] [ 5 ]}

Esto permite incorporar la carga diferida a una página web mediante la adición de atributos HTML .

El loadingatributo admite dos valores, lazyy eager. ^{[ 6 ]} Si se establece el valor en , lazyel recurso se obtendrá solo cuando sea necesario (como cuando una imagen se desplaza a la vista cuando un usuario se desplaza hacia abajo), mientras que si se establece en eager, el estado predeterminado, el recurso se cargará inmediatamente.

<!-- Estos recursos se cargarán inmediatamente --> < img src = "header_image.jpg" > < img src = "header_image2.jpg" loading = "eager" ><!-- Mientras estos recursos se cargarán de forma diferida --> < img src = "article_image.jpg" alt = "..." loading = "lazy" > < iframe src = "video-player.html" title = "..." loading = "lazy" ></ iframe >

Con la inicialización diferida, el objeto se establece primero en null.

Siempre que se solicita el objeto, este se verifica y, si existe null, se crea y se devuelve inmediatamente.

Por ejemplo, la carga diferida para un widget se puede implementar en el lenguaje de programación C# de la siguiente manera:

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

O bien, alternativamente, con el operador de asignación de coalescencia nula.??=

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

Este método es el más sencillo de implementar, aunque si nullse trata de un valor de retorno válido, puede ser necesario utilizar un objeto marcador de posición para indicar que no se ha inicializado. Si este método se utiliza en una aplicación multihilo , se debe utilizar la sincronización para evitar condiciones de carrera .

Un proxy virtual es un objeto con la misma interfaz que el objeto real. La primera vez que se llama a uno de sus métodos, carga el objeto real y luego delega la función.

Un objeto fantasma se carga parcialmente. Inicialmente, puede contener solo el identificador del objeto, pero carga sus propios datos la primera vez que se accede a una de sus propiedades. Por ejemplo, supongamos que un usuario está a punto de solicitar contenido mediante un formulario en línea. Al momento de su creación, la única información disponible es que se accederá al contenido, pero se desconoce la acción y el contenido específicos.

Un ejemplo en PHP :

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

Un contenedor de valores es un objeto genérico que gestiona el comportamiento de carga diferida y aparece en lugar de los campos de datos del objeto:

privado ValueHolder < Widget > valueHolder ;public Widget MyWidget => valueHolder . GetValue ();