Bonjour mes amis!Dans cet article, nous présenterons l'API Intersection Observer, un nouvel outil puissant pour charger paresseusement des images et d'autres éléments sur une page, pris en charge par tous les navigateurs modernes. Nous pouvons utiliser cet outil pour contrôler la visibilité des éléments en définissant le chargement préliminaire ou différé de notre contenu DOM.À mesure que le Web évolue, les navigateurs prennent en charge de plus en plus de nouvelles fonctionnalités et API, mais quelque chose blesse toujours les développeurs - le rendu DOM. Lorsque nous commençons à développer une nouvelle application, à créer des composants, à réfléchir à la structure HTML, à styliser les éléments avec CSS, nous pensons également au processus de rendu, à l'apparence générale de notre page et à d'autres choses importantes qui nécessitent une manipulation soigneuse et affectent rendu d'application.Ceci, à son tour, affecte la façon dont nous créons nos éléments, comment notre CSS sera organisé, quelles bibliothèques et frameworks seront utilisés dans le projet, etc. C'est pourquoi le rendu est si important pour les développeurs.L'une des raisons de la popularité de la bibliothèque React dans la communauté des développeurs est le fait qu'elle utilise un DOM virtuel. Il s'agit essentiellement d'une représentation virtuelle du vrai DOM, que vous pouvez contrôler à votre guise. Après toutes les mises à jour, le DOM virtuel décide quelles modifications doivent être apportées au DOM d'origine, et effectue ces changements de manière "transparente"; il n'est pas nécessaire de rafraîchir la page entière lors de la modification d'un élément. C'est l'un des avantages les plus importants de React par rapport aux autres bibliothèques et frameworks. Le rendu DOM est une tâche coûteuse (en termes de performances) que React fait très bien sans aucun problème.Certaines bibliothèques et API nous permettent d'améliorer le rendu des éléments de nos applications. Nous allons nous familiariser avec l'un d'eux - l'API Intersection Observer. Mais d'abord, découvrons ce qu'est le chargement d'image «paresseux».Comment fonctionne le chargement d'images paresseuses?
Le chargement différé est l'une des techniques de rendu du contenu de la page. Le concept de chargement «paresseux» est qu'au lieu de charger complètement la page, nous chargeons uniquement les parties nécessaires et reportons (retardons) le chargement des parties restantes jusqu'à ce que l'utilisateur en ait besoin.Un exemple de téléchargement "paresseux", dont vous avez probablement entendu parler ou que vous avez rencontré, est le défilement sans fin de la page. Cela fonctionne comme ceci: l'utilisateur visite la page, le contenu initial est chargé, et seulement après que l'utilisateur a fait défiler la page jusqu'à la fin, la partie suivante du contenu est chargée. Dans ce cas, il n'est pas nécessaire de télécharger tout le contenu à la fois, ce qui facilite grandement l'application.Si un téléchargement «paresseux» sert à télécharger uniquement du contenu «généré par l'utilisateur», comment s'appelle la technique inverse? Certains ont déjà entendu parler de chargement paresseux, mais n'ont pas entendu le contraire. Le contraire du chargement «paresseux» est le chargement «énergique» (les autres options sont impatientes, rapides) - lorsque tout le contenu est rendu immédiatement.Savez-vous qu'il existe des attributs HTML pour le chargement d'images paresseuses? Pour les utiliser, ajoutez simplement loading = "lazy" à l'élément "img" ou "iframe".
En utilisant cette technique, nous obtenons de nombreux avantages: le chargement uniquement des ressources nécessaires réduit la consommation de mémoire et, finalement, le temps de chargement des pages. Il empêche également le rendu du code "non réclamé", ce qui optimise l'application pour fonctionner dans des conditions de faible bande passante réseau. Cependant, il y a quelques inconvénients: cela peut affecter le classement de la page par les moteurs de recherche. De plus, il faut un certain temps pour choisir la bonne bibliothèque ou l'API avec laquelle travailler.API Intersection Observer
JavaScript se développe si rapidement que nous obtenons une nouvelle API presque chaque année. L'objectif principal des nouvelles API est d'aider à créer des applications et des pages impressionnantes.Intersection Observer est une API qui vous permet de surveiller la visibilité et la position des éléments DOM. Le fait est qu'il fonctionne de manière asynchrone, vous permettant de modifier en douceur (imperceptiblement) la visibilité des éléments, en déterminant le chargement préliminaire ou différé du contenu de notre DOM.
Il y a quelques années, nous n'avions pas d'API ni d'autre outil pour positionner et suivre un élément. Nous avons dû écrire des fonctions folles et énormes, créer des méthodes coûteuses (en termes de performances) qui créaient plus de problèmes. En utilisant l'API Intersection Observer, nous pouvons faire des choses intéressantes comme:- Défilement de page sans fin - créez un défilement sans fin de tableaux, de listes, de conteneurs de grille, etc. Cela n'a jamais été aussi facile.
- Images - pourquoi télécharger toutes les images à la fois, alors que vous pouvez utiliser le téléchargement "paresseux" et afficher uniquement le contenu dont l'utilisateur a besoin en ce moment?
- Surveillance des éléments - vous pouvez surveiller les éléments sur la page. Par exemple, vous pouvez recevoir des messages sur la fermeture des publicités.
Voici où tout commence:let myFirstObserver = new IntersectionObserver(callback, options)
Nous initialisons le constructeur IntersectionObserver et lui passons deux paramètres. Le premier paramètre est une fonction de rappel, qui est appelée en réponse à l'intersection de notre élément avec la fenêtre d'affichage (c'est-à-dire lorsque l'élément dépasse les limites de la fenêtre d'affichage) ou avec un autre élément. Le paramètre options est un objet qui contrôle les conditions de lancement de la fonction de rappel. Cet objet a les champs suivants:- root - l'élément parent qui sert de fenêtre d'affichage pour l'élément cible (pour l'élément que nous observons)
- rootMargin - la marge extérieure autour de l'élément racine (les valeurs de ce champ sont similaires aux valeurs de marge en CSS). Ces valeurs peuvent changer pour chaque côté de la racine avant de valider l'intersection.
- seuil - un nombre ou un tableau de nombres qui détermine le pourcentage d'intersection de l'élément cible avec l'élément racine, auquel la fonction de rappel est lancée
Jetons un coup d'œil à l'utilisation de l'API Intersection Observer:let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)
Pour commencer à "surveiller" un élément, vous devez déterminer la cible et appeler l'observateur à l'aide de la méthode "observer", en passant la cible comme paramètre:let myDivTarget = document.querySelector('.header')
observer.observe(myDivTarget)
Il ne faut pas oublier que tous les éléments observés par l'observateur sont des rectangles. Les éléments de forme irrégulière s'insèrent dans le plus petit rectangle.Qu'en est-il de la prise en charge du navigateur? L'API Intersection Observer est prise en charge par tous les navigateurs modernes tels que Chrome, Edge, Firefox et Opera.
Si vous avez l'intention de travailler avec beaucoup de données, par exemple, avec une table contenant beaucoup d'informations, l'API Intersection Observer vous sera extrêmement utile.L'un des avantages de cette API est que pour résoudre ces problèmes, vous n'avez plus besoin d'utiliser de bibliothèque.Conclusion
Nous avons étudié l'API Intersection Observer et son utilisation pour le chargement paresseux, l'observation de la position des éléments DOM, etc. Les navigateurs prennent en charge de plus en plus d'API qui réduisent le temps de rendu des pages, principalement pour les utilisateurs ayant une connexion lente, réduisant la taille du projet et affichant uniquement le contenu pertinent.De la part d'un traducteur: l'article m'a semblé insuffisamment informatif, voici donc des liens vers de la littérature supplémentaire:Merci de votre attention.