En savoir plus sur le chargement différé en JavaScript

Dans cet article, nous verrons comment fonctionne le chargement différé sur le Web. Nous aborderons l'API native de chargement différé - comment le chargement différé est implémenté, l'importance et les avantages du chargement différé, et enfin un cas d'utilisation simple pour le chargement différé de contenu Web.

Comprendre l'API de chargement différé et son fonctionnement aidera les développeurs qui utilisent déjà des bibliothèques et des frameworks qui implémentent ces techniques à comprendre ce qui se passe sous le capot. De plus, s’ils envisagent de mettre en œuvre leur propre bibliothèque de chargement différé, ils pourront effectuer des recherches plus guidées et appliquer les techniques qu’ils ont apprises.

Pour un cas d'utilisation réel, les sociétés de marketing et de publicité qui génèrent des revenus grâce aux publicités sur leur plate-forme peuvent facilement optimiser et appliquer un chargement différé pour juger facilement quelles publicités sont vues par les utilisateurs visitant leur plate-forme, prenant ainsi de meilleures décisions commerciales. .

Tutoriel recommandé : "Tutoriel vidéo JavaScript"

Qu'est-ce que le chargement paresseux ?

Selon Selon Wikipédia, le chargement différé est un modèle de conception utilisé pour retarder l'initialisation d'un élément ou d'un objet en cas de besoin. Cela signifie que ce n'est que lorsque l'utilisateur fait défiler la page Web que l'élément DOM cible par rapport à l'élément DOM parent est chargé et visible (en fonction d'un seuil défini lorsqu'il y a une intersection entre les deux éléments).

Les inconvénients de ne pas adopter ce modèle peuvent entraîner :

• En raison de plusieurs requêtes réseau simultanées pour obtenir plusieurs images ou autres ressources Web à partir d'une ou plusieurs sources ou de requêtes par lots , provoquant un retard important dans les performances de la page

• Augmentation du temps de chargement de la page en raison de la taille du package à télécharger/récupérer

• Rétention des utilisateurs Faible, principalement adaptée pour les zones avec une mauvaise connexion Internet. Lorsque nous, les développeurs, faisons l'erreur de ne pas implémenter le chargement paresseux dès le début, il n'est pas rare que les utilisateurs évitent complètement d'utiliser la plateforme

• en raison d'une mauvaise gestion des ressources ou des actifs tels que des images, des iframes. , et des vidéos. Impact énorme sur les performances et l'accessibilité du Web

Actuellement, la plupart des navigateurs modernes et plus récents prennent en charge le chargement différé sur le Web. Cependant, pour les navigateurs qui ne fournissent pas encore cette prise en charge, les cales ou les bibliothèques qui implémentent cette technologie fournissent une simple couche API par-dessus.

Le chargement paresseux résout le problème de la réduction du temps de chargement initial de la page : il affiche uniquement les ressources, telles que les images ou tout autre contenu, que l'utilisateur a besoin de voir lors de l'initialisation de la page Web, puis lorsqu'il fait défiler la page. .

Comme nous le savons tous, les problèmes de performances et d'accessibilité du Web ont de multiples facettes : la réduction de la taille des pages, de l'empreinte mémoire et des temps de chargement généraux peut faire beaucoup pour la plate-forme Web. Les avantages du chargement paresseux deviennent évidents lorsque nous avons un tas d'images et de vidéos et que nous les chargeons toutes en même temps lorsque le DOM du navigateur est initialisé.

Bien sûr, vous devez maintenant comprendre à quoi cela va conduire, comme nous en avons discuté plus tôt.

D'après les données, la plupart des sites Web s'appuient fortement sur des images et d'autres contenus Web, tels que des vidéos ou des iframes, pour fournir des informations à leur public cible. Bien que cela puisse paraître trivial et simple, la façon dont nous affichons ce contenu à nos utilisateurs détermine en fin de compte les performances de notre plateforme.

De plus, les actions qui permettent d'optimiser les temps de chargement des pages (comme les événements qui dépendent du fait que l'utilisateur a fait défiler vers une partie spécifique de la page) sont des cas d'utilisation du chargement paresseux. Au fur et à mesure de la suite de cet article, nous en apprendrons davantage sur d’autres cas d’utilisation dans des contextes réels.

API native de chargement différé

Le chargement différé est construit sur l'API Intersection Observer, une API de navigateur qui fournit un moyen de détecter ou savoir quand un élément, appelé élément cible, parent, est disponible ou visible dans la fenêtre du navigateur, selon le cas.

Lorsque cela se produit, la fonction de gestionnaire est appelée pour aider avec d'autres parties de la logique du code, comme nous le verrons plus tard.

Avec cette nouvelle API de navigateur améliorée, nous pouvons également savoir quand deux éléments DOM se croisent - ici, c'est-à-dire quand l'élément DOM cible entre dans la fenêtre d'affichage du navigateur, ou croise Intersecte un autre élément (très probablement son parent) .

Pour mieux comprendre le fonctionnement du chargement différé, nous devons d'abord comprendre comment créer un observateur d'intersection. Afin de créer un observateur d'intersection, tout ce que nous devons faire est d'écouter l'événement d'observateur d'intersection qui se produit et de déclencher l'exécution d'une fonction de rappel ou d'un gestionnaire lorsqu'un tel événement se produit.

L'événement observateur d'intersection est un événement de navigateur similaire à la catégorie d'événements de document, qui inclut l'événement DOMContentLoaded.

Remarque : Pour les événements d'intersection, nous devons spécifier les éléments auxquels l'intersection sera appliquée. Cet élément est souvent appelé élément racine. Cependant, si aucun élément racine n’est spécifié, cela signifie que nous avons l’intention de cibler l’intégralité de la fenêtre du navigateur.

De plus, nous devons spécifier un espace pour l'élément racine (si fourni) afin que sa forme ou sa taille puisse être facilement modifiée à l'intersection si nécessaire. Voyons un exemple pour mieux comprendre :

let options = {
root: null,
rootMargin: 10px,
threshold: 1.0
}

let observer  = new IntersectionObserver (options, callback);

Dans l'extrait de code ci-dessus, nous voyons un cas d'utilisation simple pour créer un observateur. options Object nous aide à définir les propriétés personnalisées de la cible.

Ici, l'attribut options dans l'objet threshold indique quand le rappel est déclenché. Sa valeur par défaut est 0, ce qui signifie qu'une fois que l'utilisateur s'approche de l'élément cible et qu'il devient visible, le rappel sera déclenché.

D'autre part, l'élément racine est l'élément parent qui fait office de fenêtre d'affichage de l'élément cible lorsqu'il devient visible par l'utilisateur lorsqu'il fait défiler la page Web. Notez que si root est défini sur vide, l'élément parent deviendra automatiquement la fenêtre.

Enfin, rootMargin aide à définir les espaces autour de l'élément racine. Par exemple, vous devrez peut-être ajuster la taille, les marges ou les dimensions de l'élément cible avant de calculer l'intersection entre celui-ci et l'élément/la fenêtre parent.

De plus, un rappel qui accepte deux paramètres d'entrée comprend une liste d'objets intersectionObserverEntry que nous avons l'intention d'appliquer à l'élément cible et à l'observateur qui appelle le rappel.

La signature du callback est la suivante :

let callback = (entries, observer) => {
entries.forEach(entry => {
If (entry.isIntersection) {
// do some magic here
}
// and some other methods
})
}

L'objet intersectionObserverEntry indique qu'il y a une intersection entre l'élément parent et l'élément cible. Il possède de nombreuses propriétés dans l'API, notamment isIntersection, intersectionRatio, intersectionRect, target, time, etc.

Nous devons cibler un élément DOM spécifique et déclencher la fonction de rappel lorsqu'il croise l'élément parent. Un exemple d'élément DOM cible est présenté dans l'extrait de code suivant :

let target = document.querySelector("#targetElement");

Dans l'extrait de code ci-dessus, nous avons créé un élément cible et lui avons attribué une variable. Après cela, nous observons l'élément cible en utilisant la méthode observer sur la signature du constructeur/fonction intersectionObserver comme ceci :

// start observing for changes on the target element
observer.observe(target);

Lorsque le seuil fixé par l'observateur pour la cible est atteint, le rappel est déclenché.

Enfin, la méthode observe() indique à l'observateur quel élément cible observer. Notez que l'observateur d'intersection a également un tas de méthodes dans son API : unObserve(), takeRecords(), observe(), etc. en sont quelques exemples.

Avantages de la technique de chargement paresseux

Maintenant, nous devons mieux comprendre pourquoi le chargement paresseux du contenu et des actifs Web est nécessaire. Jetons un coup d'œil à quelques autres avantages de l'utilisation de cette technologie :

• Création d'applications Web hautement accessibles. Les discussions sur l’accessibilité du Web sont aujourd’hui au premier plan. L'utilisation de cette technologie aidera certainement à créer une plate-forme plus large avec

• une rétention élevée des utilisateurs. Si la plateforme Web est pertinente pour atteindre les objectifs commerciaux et générer de la valeur, la mise en œuvre de cette technologie contribuera à rendre la plateforme plus conviviale. Les standards du Web vous remercieront plus tard !

• En tant que développeur, vous devrez peut-être implémenter le défilement infini sur la plateforme web. Comprendre ce concept contribuera grandement à fournir une valeur commerciale immédiate

Mise en œuvre du chargement différé

Regardons un exemple simple de chargement paresseux d'images sur une page Web. Nous allons commencer par cibler l'intersection de l'objet d'options personnalisées que nous avons l'intention d'observer :

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

Maintenant, pour l'élément cible, ciblons quelques images :

let  images = [...document.querySelectorAll('.targetImages')];

Maintenant, voyons voir En regardant le rappel d'implémentation :

const callback = (entries) => {

entries.forEach(entry => {
 If (entry.isIntersecting) {
    observer.unObserve('entry.target');
}
// handle other code logic here 
})
}

Nous pouvons continuer à appeler le constructeur d'observateur d'intersection pour observer l'élément cible, en fonction de la personnalisation spécifiée dans son objet options :

let observer = new intersectionObserver(options, callback);

Enfin, nous pouvons observer l'objet à observer Élément cible :

images.forEach(image => {
observer.observe(image);
})

Remarque : Par souci de simplicité, le code HTML et CSS ne sont pas inclus ici. Vous pouvez en savoir plus sur la façon de mettre en œuvre cette technique en consultant cet exemple dans la documentation MDN.

Résumé

Désormais, lorsque nous avons un tas d'images ou de vidéos sur une page Web et que nous les chargeons lors de l'initialisation DOM du navigateur, cela Les avantages de cette technologie sera très évident. En tant que développeurs, nous avons la responsabilité d'assurer des performances optimales des plateformes que nous gérons ou maintenons, en particulier lorsqu'elles sont liées à des objectifs commerciaux.

En tant que technologie de performance Web, le chargement paresseux permet de résoudre ce type de problème.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!