Rendre votre page Web plus rapide

Qu'est-ce qu'un DOM ? Que mange-t-il ?

Le DOM (Document Object Model) est la base des pages Web et de leur développement. Il s'agit d'une interface de programmation pour les documents HTML et XML, représentant la structure d'un document dans un objet arborescent. Avec branches et feuilles. Chaque élément, attribut et morceau de texte du document devient un nœud dans cette arborescence. Il permet à JavaScript d'interagir avec les éléments HTML, de les modifier ou d'ajouter de nouveaux éléments. Il s'agit d'un résumé approximatif de ce que chaque personne vit sur le Web, de l'interaction, de la mutabilité, des repères visuels et des éléments dynamiques. Lorsque vous cliquez sur un bouton ou sur un menu brillant, votre cerveau s'attend à ce que quelque chose se produise. À une phrase à modifier, à une nouvelle page be à charger ou à une popup avec une coche verte nous indiquant que notre commande en ligne a été payée avec succès.

Manipuler le DOM trop rapidement, chaque seconde, est un grand non-non pour la rétention des utilisateurs ou même pour l'interaction de base de l'utilisateur. Même avec tout le comportement dynamique que nous pouvons créer et étendre l'expérience utilisateur, la surutilisation des manipulations DOM peut être très frustrante. Et le dernier mot vient toujours de l’utilisateur. Si des opérations cruciales se déroulent en arrière-plan de votre page, comme la récupération de données, mais que les performances diminuent et se détériorent de minute en minute après que l'utilisateur interagit avec elle, il peut être très difficile et intimidant d'identifier les points d'étranglement.

Un exemple de manière simple d'utiliser la manière de base de faire les choses et de le faire plus rapidement consiste à utiliser textContent de vanilla js. Oui je sais. La plupart du temps, nous avons besoin d'un cycle de vie complexe pour les composants qui sont si dynamiques et mutables que nous besoins d'utiliser la gestion d'état et autres. Mais ce n’est pas toujours le cas. Si vous ne modifiez qu'un texte ou mettez à jour un cookie une fois par session, avez-vous vraiment besoin d'utiliser une logique aussi complexe et une option aussi gourmande en ressources ?

La fonction textContent est la plus rapide de js pour manipuler du texte par rapport à des options de fonctionnalités similaires, par exemple la méthode innerHtml la plus populaire. Voir ces tests chronométrés pour référence.

Pourquoi?

Vous pouvez économiser la mémoire de la machine de l'utilisateur pour d'autres opérations plus efficaces. Parfois, être accessible et raisonnablement rapide sur de très vieux appareils Android ou Apple, par exemple, est indispensable. Ou peut-être que votre appel API renvoie un JSON si gros que vous avez besoin de quelques secondes pour l'analyser et le manipuler correctement. Ainsi, chaque seconde pendant laquelle l'utilisateur ne reçoit aucun retour ou reste bloqué à regarder une animation CSS à l'écran compte.

J'ai beaucoup appris récemment en codant en JavaScript sans dépendances, comme défi et expérience d'apprentissage. Comme récupérer des données et créer une application à faire avec uniquement du HTML, CSS et JavaScript. Pas de npm, pas de bibliothèques. Et j'ai découvert un tas de méthodes et d'objets de l'API Web dont je n'avais jamais entendu parler auparavant, comme l'objet DocumentFragment. Il crée un « fragment » vide d'une structure DOM et vous permet de le manipuler et de le remplir avant de modifier réellement le DOM de la page. Ainsi, vous chargez un objet avec votre liste de menus ou les titres de votre outil super sophistiqué alimenté par l'IA, et une fois que vous avez terminé les opérations d'ajout et les balises d'imbrication, vous le corrigez une fois au DOM. De telle manière que l'analyse n'a lieu qu'une seule fois, en une seule fois, au lieu de faire une boucle for avec de nombreux appels identiques, et de nécessiter une nouvelle analyse de l'arbre à la fin de chaque appel.

Alors disons que je clique sur un bouton très rapidement, car mon cas d'utilisation nécessite un rendu très rapide, plus d'une fois par seconde. L'utilisation de votre bibliothèque de gestion d'état préférée peut créer une sorte de barrière dans ce cas, car après chaque clic, un nouvel événement est déclenché, il doit donc se déclencher avant de démarrer la deuxième instance de l'événement dans la pile, par défaut. Selon la complexité ou la nécessité d'une opération asynchrone, cela peut prendre plus d'une seconde. Dans ce cas d’utilisation, c’est un facteur décisif. Ainsi, choisir le bon outil peut être plus simple, plus court et même plus rapide. De nos jours, il existe des options proposées par les bibliothèques populaires pour résoudre ce problème, comme interrompre l'exécution d'un nouveau rendu lorsqu'un nouvel événement identique s'est déclenché récemment. Mais mon objectif ici n’est pas de simplement rechercher une application Web jolie et moderne. Mais pour vous faciliter la vie en rendant la maintenance aussi simple que possible et ne pas vous tirer une balle dans le pied en faisant aveuglément confiance à des morceaux de code que quelqu'un a écrit et dit que c'est la meilleure option.

Si vous installez déjà ces packages et bibliothèques pour lancer votre projet, pourquoi ne pas rechercher pourquoi les erreurs et les exceptions crachent des appels de fonction inconnus ou des messages cryptés sur la console ?

Conclusion et quelques divagations supplémentaires

Obtenir gratuitement un service opérationnel sur le cloud ou dans un service très courant peut être très rapide et si simple de nos jours. Utiliser une plaque passe-partout comme point de départ peut être très utile et vous fera gagner du temps sans vous soucier des tâches très basiques et récurrentes. Tapez simplement une seule commande dans votre terminal et voilà, le routage de base et une page hello world fonctionnant sur un serveur local.

Personne, nulle part sur Internet, ne saura toujours ce qu'une bibliothèque déterminée ou un framework entier fait sous le capot, mais plus vous saurez comment les choses fonctionnent, plus souvent vous serez en mesure de prendre des décisions plus éclairées et de travailler efficacement.

Les frameworks les plus populaires pour le développement Web font un excellent travail pour optimiser le rendu et manipuler le DOM en utilisant des ressources comme un DOM virtuel ou implémenter une sorte de persistance pour les opérations très exigeantes qui récupèrent des données.

Les outils de développement Web de votre navigateur Web de choix sont votre meilleur ami ici. Les versions plus récentes de ces outils peuvent vous fournir une télémétrie et même montrer quelle partie de votre code ou quels appels sont le point d'étranglement possible de vos performances.

En sachant comment fonctionne le langage JavaScript ou comment il implémente sa façon de faire, vous pouvez facilement identifier les situations dans lesquelles une fonction prête à l'emploi de votre bibliothèque préférée pourrait vous obliger à créer une base de code plus volumineuse et à ne pas vous concentrer sur la résolution du problème. problème. Cela pourrait simplement attirer votre attention sur la réplication d'un morceau de code que vous avez écrit des centaines de fois. Et même avec l'IA pour augmenter votre productivité, vous pourriez tomber dans le piège d'utiliser une solution suggérée par votre compagnon artificiel, et en réalité rendre les choses plus difficiles à maintenir à l'avenir.

Ne vous inquiétez pas, parfois nous ne savons tout simplement pas mieux. Comme je l'ai dit, personne ne peut tout savoir à tout moment.

Expérimenter et faire des erreurs dans des moments plus indulgents vous aidera beaucoup et vous donnera les outils dont vous avez besoin pour faire mieux. La prochaine fois que vous aurez l'occasion de faire quelque chose d'aussi simple que déployer un serveur de fichiers statique ou coder une logique très complexe pour un cas d'utilisation très spécialisé, connaître les bases vous mènera très loin et vous donnera plus de clarté face à de nouveaux problèmes dans votre carrière.

Je vous recommande fortement de consulter la documentation de l'API Web. En plus de jeter un œil aux blogs en ligne, aux réseaux sociaux ou aux ressources axées sur le développement Web.

Si j'ai fait des erreurs, ce qui est probable, n'hésitez pas à me le faire savoir dans les commentaires. Je suis à l'écoute des critiques et des nouvelles idées, alors s'il vous plaît, partagez-les si vous le souhaitez !

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!