Maison >interface Web >js tutoriel >Pourquoi Virtual DOM : rendu et performances

Pourquoi Virtual DOM : rendu et performances

Linda Hamiltonoriginal: 2024-11-03 14:11:30773parcourir

Dans cet article, nous examinerons le dom en détail et ce qu'est le dom virtuel.

Qu'est-ce que le DOM (Document Objec Model) ?

Lorsqu'une page Web est chargée dans le navigateur, le navigateur génère du HTML pour afficher la page demandée. Cette structure html est comme un arbre. Le DOM est formé suite à la conversion du contenu d'un document web (HTML ou XML) en une structure orientée objet par le navigateur. Grâce à cette structure, le contenu de la page est organisé dans une arborescence dans le navigateur, et chaque balise ou contenu HTML est représenté comme un "nœud".

Explorez maintenant le modèle objet du document :

Écrivons un exemple de code pour accéder à l'objet document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

console.log(document)

Sortie :

Why Virtual DOM: Render and Performance

On peut accéder au dom avec console.log(document). Quand on examine l'Objet Document, on comprend que cet objet représente un document HTML. Autrement dit, l'objet document contient toutes les balises d'un document HTML.

Avec Javascript, nous pouvons accéder aux balises à l'intérieur de l'objet document et manipuler les balises à l'intérieur de cet objet document pour créer des pages Web dynamiques. Donnons un exemple de comment accéder :

const wrapper = document.getElementById("card")

console.log(wrapper)

Sortie :

Why Virtual DOM: Render and Performance

Qu'est-ce que le DOM virtuel ?

Why Virtual DOM: Render and Performance

Nous savons maintenant que le moyen le plus simple de changer le dom ("Change HTML") est de changer la propriété innerHTML dans un élément. Cette méthode de modification du HTML n'a pas de performances bonnes dans la repeinture du DOM (" Mise à jour de ce que l'utilisateur voit "). En effet, innerHTML doit analyser les nœuds DOM à partir d'une chaîne, la prétraiter et l'ajouter. s'il y a trop de mutations HTML sur une page Web, il y aura un problème de performances.

Alors, comment le problème de performances a-t-il été résolu ?

Ce problème a été résolu en créant un DOM virtuel. Le DOM virtuel est une copie du DOM réel stocké en mémoire. Lorsque l'utilisateur interagit avec la page Web et que l'état de la page Web est mis à jour, un nouveau DOM virtuel est créé en mémoire. Ce nouveau DOM virtuel est comparé au DOM virtuel précédent pour identifier les modifications, et ces modifications sont appliquées au DOM réel pour être montré à l'utilisateur.

C'est la logique de fonctionnement des bibliothèques modernes que vous utilisez et utilise l'algorithme dif à des fins de comparaison. ils utilisent tous le DOM virtuel. Mais bien que l'approche DOM virtuel soit rapide, certains points doivent être pris en compte pour les performances. Un changement dans le domaine virtuel rend la page Web entière. Les bibliothèques disposent de crochets pour optimisations des performances

Conclusion

dans cet article, nous avons examiné ce que sont dom et DOM virtuel. Nous avons découvert pourquoi le dom virtuel est utilisé. Vous savez maintenant ce que sont le dom et le dom virtuel.

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!

JavaScript html String Object if for xml Property append copy console dom this innerHTML display issue Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La manipulation directe du DOM est-elle le meilleur moyen de modifier les balises méta avec JavaScript ?Article suivant：La manipulation directe du DOM est-elle le meilleur moyen de modifier les balises méta avec JavaScript ?

Articles Liés

Voir plus