santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

JS performance - la fonction offset de jquery VS vanilla Javascript

Attention dans cette article, la fonction utilisée en javascript pur est compatible IE8+, Chrome, Safari, Opera et Firefox

La fonction offset() en jquery

cette fonction est très pratique car elle permet de donner en pixel la position d'un élement. J'ai voulu savoir si on pouvait améliorer la performance de cette méthode en javascript.

Si je me base sur JsPerf, cette fonction peut être exectuée environ 57 529 fois par seconde. Voici le code que j'ai testé :

<div id="element"></div>

En me basant sur du jquery pur, l'offset top et left de cet élément s'obtient de la manière suivante :

<script>
    $('#element').offset().top;
    $('#element').offset().left;
</script>

En partant de là, j'ai essayé d'améliorer la performance.

La fonction offset en jquery optimisé

J'ai donc optimisé l'appel à l'offset en urilisant un peu de vanilla Javascript et du caching :

<script>
    var offset = $(document.getElementById('element')).offset();
    offset.top;
    offset.left;
</script>

Toujours d'après JsPerf, le nombre d'opération par seconde est passé à 156 697, soit environ 3 fois plus rapide !

A partir de là, j'ai donc décidé de tester en faisant une fonction offset en Javascript pur pour tester les gains de performances.

La fonction offset en vanilla Javascript

Comme je le disais en début d'article, la fonction offset utilisée en Javascript pur est compatible IE8+, Chrome, Safari, Opera et Firefox.

Voici la fonction en Javascript pur permettant de calculer l'offset :

<script>
    function offset(elt) {
        var rect = elt.getBoundingClientRect(), bodyElt = document.body;
        return {
            top: rect.top + bodyElt .scrollTop,
            left: rect.left + bodyElt .scrollLeft
        }
    }
    var offsetElt = offset(document.getElementById('element'));
    offsetElt.top;
    offsetElt.left;
</script>

Sur JsPerf, grâçe à cette méthode, le nombre d'opération par seconde est passé à 391 038 soit environ 8 fois plus rapide que le premier test !

Conclusion

Il est évident que le Javascript pur est plus rapide que jQuery car il n'y pas la surcouche jQuery.
jQuery permet d'aider le développeur à coder plus facilement et être compatible cross-browser, mais cela reste moins performant.
Ainsi en couplant Javascript pur et jQuery (comme dans le test 2), on peut fortement augmenter la performance de nos scripts.
C'est pourquoi je vous encourage à toujours optimiser votre code jQuery et de ne peut se contenter d'utiliser du jQuery pur.

image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page