Le seul moyen de sélectionner des éléments en Javascript est d’utiliser les méthodes DOM classiques : document.getElementById(), getElementsByTagName(), nexSibling(), etc.
C’est assez fastidieux, et n’incite pas vraiment les développeurs à concevoir leurs scripts de manière non-intrusive.
Voilà pourquoi plusieurs librairies Javascript ont ajouté une couche supplémentaire : il suffit de passer une chaîne de sélecteur CSS, et cette chaîne est retranscrite en méthodes DOM classique par le moteur de la librairie pour retourner un tableau d’éléments correspondant à ce sélecteur. Evidemment, toutes ces opérations ont un coût en termes de performances.
Selectors API propose de régler ce problème : il sera tout simplement possible de passer une chaîne CSS à la méthode document.querySelectorAll();, qui renverra un tableau d’éléments correspondant à la sélection. Bien entendu, cette méthode sera exécutée par le navigateur, ce qui est beaucoup plus intéressant.
La dernière version de Webkit vient d’intégrer cette méthode, et les résultats sont très concluants. Pour le démontrer, ils ont utilisé le benchmark slickspeed du projet mootools, permettant justement de comparer les performances des sélecteurs CSS pour chaque bibliothèque : http://webkit.org/perf/slickspeed/ .
Les différentes bibliothèques utilisant un sélecteur de ce type, comme jQuery, peuvent d’ores et déjà prendre en compte les navigateurs supportant cette méthode : il suffit de tester document.querySelectorAll(), et de lui passer la main s’il existe.
L’article sur Webkit.org : http://webkit.org/blog/156/queryselector-and-queryselectorall/
Télécharger la dernière version de Webkit : http://nightly.webkit.org/
Publier un commentaire