L'API Intersection Observer rend un chargement paresseux paresseux

Nous allons découvrir l'API Intersection Observer, un moyen puissant de paresser les éléments lkoad dans nos applications.

Dans cet article, nous allons en savoir plus sur l'API Intersection Observer, une nouvelle et puissante API prise en charge par les navigateurs modernes qui nous aide à charger des images et d'autres éléments paresseux dans nos pages Web. Nous pouvons utiliser cette API pour comprendre la visibilité des éléments et mettre en œuvre le préchargement et le chargement différé du contenu de notre DOM.

Comme le Web a évolué au fil des ans, les navigateurs reçoivent de plus en plus de support pour de nombreuses nouvelles fonctionnalités. et les API, mais quelque chose qui est toujours un problème pour les développeurs de temps en temps est le rendu du contenu sur DOM. Lorsque nous démarrons une nouvelle application, créons des composants, pensons à notre structure HTML, stylisons nos fichiers CSS, nous pensons déjà à notre processus de rendu, à l'apparence de notre mise en page et à certaines parties importantes que nous devons regarder soigneusement pour obtenir un bon rendu sur notre application.

Cela fait beaucoup de différence dans l'application, comment nous allons créer nos éléments, comment nous allons organiser notre CSS, quelles bibliothèques et frameworks nous sommes va utiliser, etc. C'est pourquoi le rendu est toujours un sujet brûlant pour les développeurs.

L'une des raisons pour lesquelles la bibliothèque React, créée par Facebook en 2011, est devenue si grande et populaire dans la communauté du développement Web, c'est parce que cette bibliothèque fonctionne avec quelque chose appelé DOM virtuel. Fondamentalement, il s'agit d'une représentation virtuelle de votre DOM, que vous pouvez manipuler et mettre à jour à votre guise. Ensuite, après toutes les mises à jour, le DOM virtuel examinera les modifications spécifiques qui doivent être apportées sur le DOM d'origine, et appliquera ces modifications de manière agréable et optimisée, de sorte que vous n'aurez pas à mettre à jour la page entière lorsque le seul les changements étaient dans un seul élément. C’est l’un des plus grands avantages de React face aux autres bibliothèques et frameworks de nos jours. Le rendu du contenu sur le DOM est un travail difficile et une tâche coûteuse, mais React le rend meilleur et plus rapide, sans aucun type de problème.

Certaines bibliothèques ou API peuvent améliorer le rendu de nos éléments dans nos applications. C'est pourquoi nous allons en savoir plus sur l'API Intersection Observer et voir comment cette nouvelle API peut nous aider. Commençons par comprendre un peu plus le chargement paresseux, puis nous allons plonger et voir comment fonctionne l'API Intersection Observer.

Comment fonctionne le chargement paresseux?

Le chargement paresseux est une technique de rendu de contenu sur la toile. Au lieu de rendre la page entière en une seule fois et de laisser l'utilisateur avec une expérience plus lourde, le concept de chargement paresseux consiste à charger uniquement les pièces requises et à retarder le reste jusqu'à ce que l'utilisateur en ait besoin.

Un exemple de chargement paresseux dont vous devez avoir entendu parler et que vous avez peut-être utilisé dans vos applications est le défilement infini. Les défilements infinis fonctionnent comme ceci: l'utilisateur entre sur le site Web, charge la page de contenu initiale et, uniquement lorsque l'utilisateur défile jusqu'à la fin, il charge plus de contenu. De cette façon, il n'est pas nécessaire de tout charger en même temps et d'avoir une application énorme et lourde.

Donc, si le chargement paresseux est la technique de rendu uniquement le contenu dont l'utilisateur aura besoin, quel est le terme inverse? Certaines personnes ont peut-être déjà entendu parler du chargement paresseux, mais ne savent pas exactement quel est le contraire. Le contraire du chargement paresseux est appelé chargement rapide — lorsque votre utilisateur entre dans votre site Web et qu'il affiche tout le contenu immédiatement.

Saviez-vous que le Web a maintenant un nouvel attribut de chargement, afin que nous puissions charger des images en mode natif? Pour l'utiliser, il vous suffit de transmettre un élément loading = lazy à votre élément img ou iframe .

En utilisant cette technique, nous avons de nombreux avantages: le chargement des ressources selon les besoins réduit la consommation de temps et l'utilisation de la mémoire si une seule partie de la page est rendue, ce qui signifie que le temps de chargement de la page est réduit. Il permet également de ne pas rendre de code inutile, ce qui optimise beaucoup vos applications, en particulier pour ceux qui utilisent certains appareils réseau lents. Mais il présente également certains inconvénients tels que: il peut affecter le classement de votre site Web sur les moteurs de recherche, et il faut également un certain temps pour l'implémenter correctement, en utilisant les bonnes bibliothèques ou API pour le travail.

API Intersection Observer

JavaScript a évolué si rapidement au fil des ans que nous obtenons de nouvelles API Web presque chaque année, et l'avantage de ces nouvelles API Web est de créer des applications et des pages Web meilleures et plus impressionnantes.

L'Intersection Observer est une API que nous pouvons utiliser pour garder une trace de la visibilité et de la position des éléments DOM. Le changement de jeu ici est qu'il est livré de manière asynchrone, ce qui le rend vraiment utile pour comprendre la visibilité des éléments, afin que nous puissions implémenter le préchargement et le chargement différé de notre contenu DOM.

Image par Arnelle Balane

Si nous revenons sur le Web il y a quelques années, nous n'avions pas d'API ou quelque chose de similaire pour calculer et suivre la position d'un élément. La plupart du temps, nous nous sommes retrouvés avec des fonctions folles et énormes, créant des méthodes coûteuses, nous causant plus de problèmes que de solutions. Avec cette API Intersection Observer, nous pouvons créer des choses vraiment sympas, dont beaucoup sont largement utilisées de nos jours, comme:

• Parchemins infinis – En utilisant cette API, il n'a jamais été aussi facile de créer des parchemins infinis tels que des tableaux, listes, grilles, etc.
• Images – Il n'est pas nécessaire de rendre toutes les images de votre page Web en même temps; vous pouvez paresseusement charger les images et rendre uniquement les images dont l'utilisateur a besoin pour le moment.
• Éléments du moniteur – Vous pouvez garder une trace de vos éléments dans votre page; vous pouvez surveiller les éléments et voir s'ils sont rendus à l'utilisateur. Cela est vrai pour les publicités sur la page, afin que vous puissiez signaler quand une annonce a été affichée.

C'est ainsi que nous pouvons commencer à utiliser l'intersection API Observer:

     let myFirstObserver = new IntersectionObserver (rappel, options);

Premièrement, nous appelons le constructeur IntersectionObserver et ce IntersectionObserver reçoit deux paramètres. La première est la fonction de rappel, qui est appelée lorsqu'un élément intersecte la fenêtre de notre appareil ou un élément spécifique; le paramètre options est un objet, et cet objet contrôle les circonstances de l'appel de votre rappel. L'objet options a les champs suivants:

root – L'élément parent qui a été utilisé comme fenêtre d'affichage de l'élément cible.

rootMargin – La marge autour de l'élément racine , il reçoit des valeurs similaires aux propriétés de marge CSS. Ces valeurs peuvent augmenter ou diminuer de chaque côté de la boîte de l'élément racine avant de calculer une intersection.

seuil – Il peut s'agir d'un nombre ou d'un tableau de nombres, et il indique quel pourcentage de la visibilité de la cible le la fonction de rappel de l'observateur doit être invoquée.

Image de Arnelle Balane

Commençons donc à utiliser l'API Intersection Observer. Nous allons d'abord nous connecter à la console chaque élément.

     let options = {
        root: document.querySelector ('. scroll-list'),
        rootMargin: '5px',
        seuil: 0,5
    };

    laissez myFirstObserver = new IntersectionObserver (elements => {elements.forEach (element => console.log ("element", element));
    }, options);

Maintenant, pour commencer à " observer " un élément, tout ce que nous devons faire est d'obtenir la cible spécifique que nous voulons, puis appeler l'observateur avec la fonction observez en passant l'élément cible comme ceci:

     laissez myDivTarget = document.querySelector ('. Header');

    observer.observe (myDivTarget);

Vous devez vous rappeler que tous les éléments pris en compte par l'API Intersection Observer sont des rectangles; les éléments de forme irrégulière sont considérés comme occupant le plus petit rectangle qui englobe toutes les parties de l'élément.

Mais qu'en est-il de la prise en charge de l'API Intersection Observer de nos jours? Les navigateurs prennent-ils vraiment en charge cette nouvelle API? La réponse est: à moins que vous ne développiez pour IE ou un navigateur très ancien, vous pouvez l'utiliser sans vous inquiéter, car il est pris en charge par la dernière version des navigateurs les plus utilisés, tels que Chrome, Edge, Firefox et Opera.

Si vous devez traiter un grand nombre de données, par exemple un tableau contenant de nombreuses informations, l'API Intersection Observer peut être extrêmement utile pour créer une table qui affiche uniquement le contenu dont l'utilisateur a besoin, et aucun contenu supplémentaire.

L'un des avantages de cette API est que vous n'avez plus besoin d'utiliser une bibliothèque pour ce type de travail. La majorité des navigateurs fournissent un support important pour certaines des API les plus récentes et les plus impressionnantes, et cela a amélioré l'expérience pour les utilisateurs en général, permettant aux développeurs d'utiliser certaines API de navigateur natives et réduisant leur ensemble de code final.

Conclusion

Dans cet article, nous avons découvert l'API Intersection Observer et comment cette API peut nous aider à créer de meilleures pages en les chargeant paresseusement, en gardant une trace de la position de nos éléments DOM, etc. Les navigateurs fournissent de plus en plus de natifs la prise en charge des API Web, et cette API est particulièrement utile pour réduire le temps de rendu, bénéficier aux utilisateurs avec des connexions réseau lentes, réduire le regroupement de votre page Web et rendre uniquement le contenu dont votre utilisateur a besoin.

Ne vous arrêtez pas votre apprentissage ici – continuez à apprendre et à découvrir davantage sur cette API, créez des pages Web époustouflantes et sentez comment cette API peut vous être utile au quotidien.