Javascript Girl
  1. Javascript Girl
  3. Est-ce qu'il y a trop d'ids?
Intereting Posts
Les requêtes XPath dans IE utilisent des index basés sur zéro, mais la spécification W3C est basée sur un seul. Comment puis-je gérer la différence? Détecter les séries de combinaison de touches avec Javascript Comment la comparaison (A == B == C) fonctionne-t-elle en JavaScript? Comment montrer les suggestions de datalogues à l'aide de javascript? Bootstrap Tooltip ne fonctionne pas avec police Impressionnant icône Le gestionnaire de clics de liaison avec les variables dans la portée est-il créé? Existe-t-il un échantillon minimaliste de PDF.js qui prend en charge la sélection du texte? Que signifient les avertissements «Non optimisés» dans le Profiler Chrome? Passer un passe-droit à une autre fonction Comment utiliser plusieurs contextes de toile? NE MarcoAachaps illustrésAclief Marco Chamonet ChamonetAachetAachetachachachachachachachélie Marco illustr portfólio Comment vérifier si une variable est nulle et / ou non définie en JavaScript Existe-t-il un équivalent pour var_dump (PHP) en Javascript? Javascript / PHP Family Tree Builder avec plusieurs parents Moment.js – À partir de la semaine de lundi avec isoWeekday ()

Est-ce qu'il y a trop d'ids?

Si j'ai sur la page des id inutiles sur les éléments, comme le fait HTML Helper dans ASP.Net-MVC .
Est-ce que cela réduit la performance de mes sélecteurs d'identifiants? (J'ai une page avec énormément d'éléments)

Exemple: 

 // First DOM <HTML> ... <input type="text" value="first" id="useless" /> <input type="text" value="second" id="useful" /> </HTML> // Second DOM <HTML> ... <input type="text" value="first"/> <input type="text" value="second" id="useful" /> </HTML>

Scénario: 

 <script> alert($('#useful').val()); // never select the first element (with the useless id) </script>

Réponse courte, non.

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Il y a quelques mois, il y avait des articles sur l'impact sur la performance des sélecteurs CSS inefficaces. J'ai été intrigué – c'est le genre de comportement idiosyncratique du navigateur pour lequel je vis. Lors d'une enquête plus approfondie, je ne suis pas si certain que cela vaut le temps de rendre les sélecteurs CSS plus efficaces. J'irai encore plus loin et je dirais que je ne pense pas que personne ne remarquerait si nous nous sommes réveillés demain et que tous les sélecteurs CSS de chaque page étaient optimisés par magie …

J'ai révisé le test comme suit:

  • 2000 ancres et 2000 règles (au lieu de 20 000) – cela provoque en fait ~ 6000 éléments DOM en raison de toute l'imbrication dans P, DIV, DIV, DIV
  • La page de ligne de base et la page de sélection d'étiquette ont 2000 règles comme toutes les autres pages, mais ce sont des règles de classe simples qui ne correspondent pas aux classes de la page

J'ai effectué ces tests sur 12 navigateurs. Le temps de rendu de la page a été mesuré avec un bloc de script en haut et en bas de la page. (J'ai chargé la page du disque local pour éviter un impact possible de l'encodage fragmenté).

Sur la base de ces tests, j'ai l'hypothèse suivante: pour la plupart des sites Web, les gains de performance possibles lors de l'optimisation des sélecteurs CSS seront faibles et ne valent pas les coûts. Il existe certains types de règles CSS et d'interactions avec JavaScript qui peuvent rendre une page nettement plus lente. C'est là que l'accent devrait être …

La sélection d'un identifiant est extrêmement rapide, car jQuery sauvegarde vers l'origine 

  document.getElementById

fonction. Néanmoins, vous pouvez mettre en cache vos sélecteurs si vous les utilisez fréquemment (les enregistrer dans une variable).

Bien que la performance JavaScript ne soit pas affectée, des milliers d'identifiants rendent votre HTML plus grand, ce qui augmente le temps de chargement et le coût du trafic. Il est probablement négligeable (la compression d'images et d'autres ressources est beaucoup plus importante), mais peut néanmoins être un itinéraire pour l'optimisation.

La sélection d'éléments par id dans jQuery est l'un des quelques sélecteurs qui ne recevront pas de performance si plusieurs éléments apparaissent sur la page.

Si, d'autre part, vous choisissiez des éléments en fonction de la valeur de classe ou d'attribut, vous verriez un succès significatif. Si vous êtes préoccupé par la performance, assurez-vous également de mettre en cache vos sélecteurs jquery en stockant les sélecteurs dans les variables pour réutiliser. 

 var element = $("#specificElement"); console.log(element.val());