Quand utiliser querySelectorAll

Question

Dans un exemple de code que j'ai écrit

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

Et je pensais que je pourrais remplacer ça par

var as = document.querySelectorAll("a.false");

Maintenant, après avoir lu les faits suivants

• Faites comme si la prise en charge des navigateurs n'était pas un problème (nous avons des cales et des polyfills).
• Faites comme si vous n'étiez pas dans votre état d'esprit jQuery générique et que vous deviez utiliser QSA pour obtenir chaque élément.
• Je vais écrire qsa au lieu de document.querySelectorAll parce que je suis paresseux.

Pregunta: Quand dois-je privilégier QSA par rapport aux méthodes normales ?

Il est clair que si vous faites qsa("a") ou qsa(".class") ou qsa("#id") vous vous y prenez mal car il existe des méthodes (byTagName, byClassName, byId) qui sont meilleures.

Il est également clair que qsa("div > p.magic") est un cas d'utilisation judicieux.

Pregunta: Mais est-ce que qsa("tagName.class") un bon cas d'utilisation de QSA ?

En outre, il existe aussi des choses appelées NodeIterator

J'ai posé une question sur QSA vs NodeIterator

Answer 1

Vous devez utiliser QSA lorsque les gEBI, gEBN, gEBCN ne fonctionnent pas parce que votre sélecteur est complexe.

L'analyse syntaxique QSA ou DOM est une question de préférence et de ce que vous allez faire avec l'ensemble des données retournées.

Answer 2

Si la prise en charge des navigateurs n'était pas un problème, je l'utiliserais partout. Pourquoi utiliser 4 méthodes différentes (...byId, ...byTagName, ...byClassName) si vous pouvez en utiliser une seule.

QSA semble être plus lent (... parId ), mais ne prend toujours que quelques milisecondes ou moins. La plupart du temps, vous ne l'appelez que quelques fois, donc pas de problème. Lorsque vous rencontrez un goulot d'étranglement, vous pouvez toujours remplacer QSA par l'autre programme approprié.

Answer 3

J'ai mis en place quelques tests pour que vous puissiez vous amuser avec. Il apparaît que QSA est beaucoup plus lent. Mais si vous ne l'appelez pas autant, cela ne devrait pas être un problème.

http://jsfiddle.net/mxZq3/

EDIT - version jsperf

http://jsperf.com/qsa-vs-regular-js