Pour mesurer les performances<\/strong> d’un s\u00e9lecteur optimis\u00e9 avec ou sans la librairie jQuery, des tests sont r\u00e9alis\u00e9s tout au long de l’article. Cependant il n’est pas possible ou tr\u00e8s difficile de mesurer cela au niveau du CSS. En analysant la performance au niveau du JavaScript cela donne une id\u00e9e globale dont les r\u00e9percussions pour du CSS semblent \u00eatre \u00e9videntes. Au niveau de la console des outils de d\u00e9veloppement du navigateur, on retrouve tous les r\u00e9sultats des tests d\u00e9crits dans cette page web. Ces benchmarks permettent de comparer un s\u00e9lecteur optimis\u00e9 ou non et en plus de mesurer cela avec jQuery.<\/p>\n\n\n\n Pour manipuler les \u00e9l\u00e9ments d’une page web, il est essentiel de conna\u00eetre les s\u00e9lecteurs en JavaScript<\/strong>. Un s\u00e9lecteur permet d’identifier un \u00e9l\u00e9ment du DOM en fonction du type (div, span, a, etc.) ou d’un attribut (id, class, href, etc.). L’optimisation des s\u00e9lecteurs est importante pour \u00e9viter de devoir parser le DOM en entier afin d’identifier un \u00e9l\u00e9ment. En effet, si on doit cibler un div qui poss\u00e8de une certaine classe et qu’on sait qu’il est situ\u00e9 dans le footer de la page, il est important d’ajouter le footer dans le s\u00e9lecteur pour le cibler plus rapidement. On retrouve exactement le m\u00eame principe en CSS dans la d\u00e9claration de ses styles pour optimiser les performances de construction de la page.<\/p>\n\n\n\n Les exemples avec optimisation du s\u00e9lecteur montre bien une performance 5 \u00e0 10x plus rapide<\/strong> que ce soit en JavaScript ou avec jQuery. Il permet de cibler le titre de la page en indiquant au navigateur dans quelle section du code source HTML il peut le trouver. L’avantage principal est d’aider le navigateur a identifier l’\u00e9l\u00e9ment cibl\u00e9 mais le principal d\u00e9savantage est que si on change la structure de l’HTML alors le s\u00e9lecteur ne fonctionne plus. Il faut trouver un bon compromis entre un s\u00e9lecteur cibl\u00e9 sans toutefois ajouter trop d’\u00e9l\u00e9ments. Ajouter 2 \u00e0 3 \u00e9l\u00e9ments parents dans le s\u00e9lecteur est un bon ratio. Ce test montre bien qu’un s\u00e9lecteur optimis\u00e9 en JavaScript est en moyenne 5 \u00e0 10x plus rapide.<\/p>\n\n\n\n Le benchmark des multis\u00e9lecteurs<\/strong> va cibler les \u00e9l\u00e9ments de la liste des articles r\u00e9cents au niveau de la sidebar puis faire une boucle pour ajouter une classe \u00e0 chaque lien de la liste. Cet exemple permet de comparer plusieurs fonctionnalit\u00e9s comme la boucle each et l’ajout d’une classe. Le CSS est par d\u00e9faut multis\u00e9lecteur, car quand on cible un \u00e9l\u00e9ment dans le document, ce sont tous les \u00e9l\u00e9ments identiques qui sont cibl\u00e9s. Au final, comme le benchmark pr\u00e9c\u00e9dent, JavaScript natif est 2 \u00e0 3x plus rapide<\/strong> que jQuery pour cibler plusieurs balises et r\u00e9aliser une boucle. Si on optimise un peu son s\u00e9lecteur, on a un gain de performance de 1,5x<\/strong> par rapport \u00e0 une s\u00e9lection directe de l’objet.<\/p>\n\n\n\n Ces s\u00e9lecteurs permettent de cibler le premier et dernier \u00e9l\u00e9ment <\/strong>d’une liste ou d’un ensemble de m\u00eame type. Ils sont tr\u00e8s pratiques en CSS pour appliquer un style particulier au premier ou au dernier \u00e9l\u00e9ment d’une liste ou d’un tableau. Comme dans les tests pr\u00e9c\u00e9dents un s\u00e9lecteur optimis\u00e9 en JavaScript natif est 2 \u00e0 3x plus rapide<\/strong> pour cibler l’\u00e9l\u00e9ment. Il existe aussi des fonctions JavaScript et jQuery pour cibler ces \u00e9l\u00e9ments comme lastElementChild et last mais utiliser les s\u00e9lecteurs qui le font de fa\u00e7on tr\u00e8s bien est plus propre.<\/p>\n\n\n\n Enfin pour finir ces benchmarks de performance, le s\u00e9lecteur not<\/strong> va permettre de cibler au niveau des liens vers les r\u00e9seaux sociaux en bas de l’article tous les r\u00e9seaux sauf Twitter. Le s\u00e9lecteur not permet de retirer un \u00e9l\u00e9ment d’une liste en fonction d’un attribut. Pour cela l’attribut data-network-name servira \u00e0 cibler tous les boutons sauf celui qui a la valeur twitter. not est pratique en CSS pour appliquer des styles cibl\u00e9s sur des balises HTML. L\u00e0 encore le JavaScript en natif est 2 \u00e0 3x plus rapide<\/strong> qu’un s\u00e9lecteur non optimis\u00e9 ou que la librairie jQuery. <\/p>\n\n\n\n Pour conclure ces benchmarks, on peut remarquer qu’un s\u00e9lecteur optimis\u00e9 en JavaScript natif est en moyenne 2 \u00e0 5x plus rapide<\/strong> pour identifier un \u00e9l\u00e9ment. La librairie jQuery offre un bon compromis et reste tout de m\u00eame relativement optimis\u00e9e. <\/p>\n\n\n\n En fonction de ce que l’on recherche dans un projet, int\u00e9grer la librairie jQuery permet d’\u00e9crire un code plus concis et facile \u00e0 maintenir. Cependant si on cherche la performance avant tout il est judicieux d’\u00e9crire son code en vanilla JS pour maximiser les performances de l’application. Il faudrait comparer des fonctionnalit\u00e9s plus pouss\u00e9es, mais un d\u00e9veloppement en natif sera toujours plus rapide<\/strong> que n’importe quelle librairie que ce soit jQuery ou une autre. Ne pas confondre une librairie qui ajoute des fonctionnalit\u00e9s \u00e0 un langage de programmation avec un web framework<\/a> qui lui permet de structurer son code et de b\u00e9n\u00e9ficier de fonctionnalit\u00e9s majeures telles que le routage, la r\u00e9activit\u00e9 ou le multilingue comme Angular ou VueJS.<\/p>\n\n\n\n Il existe de nombreux types de s\u00e9lecteurs <\/strong>en CSS et JavaScript comme les combinateurs (>), les s\u00e9lecteurs adjacents (+), etc. Savoir bien les utiliser permet de manipuler le document de fa\u00e7on pr\u00e9cise et rapide. Il est pr\u00e9f\u00e9rable de privil\u00e9gier les fonctions natives de JavaScript pour rechercher une ou plusieurs balises dans une page HTML en sp\u00e9cifiant 2 \u00e0 3 \u00e9l\u00e9ments parents pour acc\u00e9l\u00e9rer le s\u00e9lecteur.<\/p>\n\n\n\n![\"Optimisation](\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/02\/illustration_benchmark-selector.jpg\")
Les s\u00e9lecteurs de type et d’attribut<\/h2>\n\n\n\n
<srcipt>\n$(document).ready(function() {\n console.log('Benchmark : simple s\u00e9lecteur');\n\n \/\/ JS : 0.136 ms\n console.time('test1');\n let test1 = document.querySelector('h1.entry-title');\n console.timeEnd('test1');\n\n \/\/ JS (optimis\u00e9) : 0.028 ms\n console.time('test2');\n let test2 = document.querySelector('#main-content .post-header h1.entry-title');\n console.timeEnd('test2');\n\n \/\/ jQuery : 0.344 ms\n console.time('test3');\n let test3 = $('h1.entry-title');\n console.timeEnd('test3');\n\n \/\/ jQuery (optimis\u00e9) : 0.139 ms\n console.time('test4');\n let test4 = $('#main-content .post-header h1.entry-title');\n console.timeEnd('test4');\n\n});\n<\/srcipt><\/code><\/pre>\n\n\n\nLes multis\u00e9lecteurs<\/h2>\n\n\n\n
<srcipt>\n$(document).ready(function() {\n console.log('Benchmark : multi s\u00e9lecteurs');\n\n \/\/ JS : 0.636 ms\n console.time('test5');\n let test5 = document.querySelectorAll('a.wp-block-latest-posts__post-title');\n test5.forEach(element => element.classList.add('new-class-js'));\n console.timeEnd('test5');\n\n \/\/ JS (optimis\u00e9) : 0.421 ms\n console.time('test6');\n let test5 = document.querySelectorAll('#main-content .et_pb_extra_column_sidebar a[href]');\n test5.forEach(element => element.classList.add('new-class-js-optim'));\n console.timeEnd('test6');\n\n \/\/ jQuery (optimis\u00e9) : 0.826 ms\n console.time('test7');\n let test6 = $('#main-content .et_pb_extra_column_sidebar a[href]');\n test6.each(function() { $(this).addClass('new-class-jquery'); });\n console.timeEnd('test7');\n\n});\n<\/script><\/code><\/pre>\n\n\n\nLes s\u00e9lecteurs first & last child<\/h2>\n\n\n\n
<script>\n$(document).ready(function() {\n console.log('Benchmark : s\u00e9lecteurs first & last child');\n\n \/\/ JS : 0.193 ms\n console.time('test8');\n let test8 = document.querySelector('ul.wp-block-latest-posts li:last-child');\n console.timeEnd('test8');\n\n \/\/ JS (optimis\u00e9) : 0.065 ms\n console.time('test9');\n let test9 = document.querySelector('#main-content .et_pb_extra_column_sidebar ul.wp-block-latest-posts li:last-child');\n console.timeEnd('test9');\n\n \/\/ jQuery (optimis\u00e9) : 0.109 ms\n console.time('test10');\n let test10 = $('#main-content .et_pb_extra_column_sidebar ul.wp-block-latest-posts li:last-child');\n console.timeEnd('test10');\n\n});\n<\/script><\/code><\/pre>\n\n\n\nLe s\u00e9lecteur not<\/h2>\n\n\n\n
<script>\n$(document).ready(function() {\n console.log('Benchmark : s\u00e9lecteur not');\n\n \/\/ JS : 0.212 ms\n console.time('test11');\n let test11 = document.querySelectorAll('a.social-share-link:not([data-network-name=\"twitter\"])');\n console.timeEnd('test11');\n\n \/\/ JS (optimis\u00e9) : 0.079 ms\n console.time('test12');\n let test12 = document.querySelectorAll('#main-content .post-footer a.social-share-link:not([data-network-name=\"twitter\"])');\n console.timeEnd('test12');\n\n \/\/ jQuery (optimis\u00e9) : 0.147 ms\n console.time('test13');\n let test13 = $('#main-content .post-footer a.social-share-link:not([data-network-name=\"twitter\"])');\n console.timeEnd('test13');\n\n});\n<\/script><\/code><\/pre>\n\n\n\nConclusion sur les tests de performance<\/h2>\n\n\n\n