La nouvelle fonctionnalité @defer dans Angular fait partie des améliorations du framework visant à améliorer les performances, notamment en matière de chargement paresseux et d'optimisation du rendu. Voici un aperçu rapide de la fonctionnalité @defer et des blocs @placeholder et @loading.
1 2 3 |
|
Sous le capot, @defer utilise l'API IntersectionObserver. Cette API vous permet d'observer les changements dans l'intersection d'un élément cible avec un élément ancêtre ou dans la fenêtre d'affichage du document de niveau supérieur. En différant le chargement des composants jusqu'à ce qu'ils soient sur le point d'entrer dans la fenêtre d'affichage, vous pouvez éviter de charger des ressources que l'utilisateur ne verra peut-être jamais, économisant ainsi la bande passante et la puissance de traitement.
Temps de chargement initial amélioré : le report des composants jusqu'à ce qu'ils soient nécessaires garantit que seules les parties les plus critiques de l'application sont chargées initialement. Cela réduit le temps de chargement initial et améliore les performances perçues de l'application, la rendant plus rapide et plus réactive. Angular créera des bundles séparés pour les composants différés, réduisant ainsi également la taille de votre bundle principal.
Expérience utilisateur améliorée : en chargeant le contenu juste avant qu'il ne devienne visible, vous pouvez garantir une expérience plus fluide et plus transparente aux utilisateurs. Cette technique peut être particulièrement bénéfique pour les pages à défilement long, où le chargement du contenu au fur et à mesure que l'utilisateur fait défiler peut empêcher l'application de devenir lente.
Meilleures performances sur les appareils à faible consommation : les appareils avec une puissance de traitement limitée ou des connexions réseau lentes peuvent bénéficier considérablement d'un chargement différé. En chargeant uniquement les composants nécessaires, ces appareils peuvent gérer les applications plus efficacement, offrant ainsi une meilleure expérience aux utilisateurs sur une large gamme d'appareils.
Voici un exemple montrant comment utiliser @defer dans une application Angular. Tout d’abord, créez un composant qui charge les images. L'utilisation de composants autonomes est une exigence pour @defer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Et ici, nous utilisons @defer sans aucune option.
1 2 3 4 |
|
Maintenant, en regardant le bundle généré, nous pouvons voir que le composant image a son propre morceau.
Dans l'onglet réseau, lorsque la page est chargée, on peut voir que ce bundle est désormais chargé au moment de l'exécution.
Plusieurs options sont disponibles pour améliorer l’expérience utilisateur. Dans cette section, nous passerons en revue certains d'entre eux.
By default, the defer block will render the content when it is visible in the viewport. However, there can be delays, for example, when the components are making HTTP requests. In those scenarios, we can use the @placeholder option. The content used for the placeholder is not lazy loaded. The content in the @placeholder is shown first until the @defer block's contents are ready to render. The placeholder itself comes with an optional argument called minimum. This allows you to set the time to display the content.
Here is how this would look:
1 2 3 4 5 6 |
|
And here is how this looks:
The @loading block is used to display some content while the content defined in the @defer block is still loading or has started to load. This is different from the @placeholder block, which will appear before the loading starts. This block comes with two optional arguments, after and minimum. Similar to the @placeholder argument, the minimum argument is used to set the time to display the content. The second argument, after, is used to define the waiting time before showing the @loading content.
Here is how this would look:
1 2 3 4 5 6 |
|
While you may not see this properly in the animated GIF, we are telling the block to wait at least 1 second before displaying the @loading content and show it for at least 500 ms.
The @defer feature in Angular is a powerful tool for enhancing performance and user experience by delaying the loading of components until they are needed. By integrating this feature with options like @placeholder and @loading, developers can create more efficient and responsive applications. As Angular continues to evolve, features like @defer will play a crucial role in optimizing resource management and improving application performance across various devices and network conditions.
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!