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

Performance sous jQuery

jQuery est une bonne librairie javascript, elle permet d'augmenter grandement la productivité de code javascript et permet de gerer les exceptions liées aux navigateurs car elle est compatible cross-browser.

Mais parfois l'utilisation de cette librairie peut s'avérer gourmande en resource navigateur, c'est pour cette raison qu'il fait absolument optimiser son code sous jQuery

Voici quelques points que j'utilise sans cesse pour améliorer la performance javascript sous jQuery :

Utiliser la dernière version de jQuery

La dernière version de jQuery règle certains bug, corrige des problèmes de performance et de compatibilité, augmente la rapidité d'execution de jQuery.

Utiliser le vanilla JavaScript

le vanilla javascript c'est le javascript pur. En effet il est parfois plus rapide d'utiliser le javascript pur.

Par exemple, au lieu de faire :

$('#mon_element').val();

utilisez plutot :

document.getElementById('mon_element').value

Si vraiment vous devez utiliser jQuery (pour une gestion d'event par exemple), il faut plutot utiliser la syntaxe suivant :

$(document.getElementById('mon_element')).on('click', function(){
...
});

Sous JSperf, on voit tout de suite le gain en performance : jsperf vanilla versus jquery

La délégation d'évènement

 Souvent quand on utilise des évènements, on a tendance à declarer un évènement pour chaque élément DOM qui en ont besoin. Il est judicieux de regrouper les différents évenment sur le parents afin de plutot tester quel élément est cliqué par exemple.

Exemple :

<section id="ma_section">
    <a href="#" class="cancel">cancel</a>
    <a href="#" class="done">done</a>
    <button>add new</button>
</section>

plutot que faire ceci

$('#ma_section').on('click', 'a.cancel', function(){
    ...
});
$('#ma_section').on('click', 'a.done', function(){
   ...
});
$('#ma_section').on('click', 'button', function(){
    ...
}); 

Préférez plutot cette syntaxe : 

$(document.getElementById('ma_section')).on('click', function(event){
    var target = event.target;
    if (target.tagName === 'A') {
        if (target.className === 'cancel') {
             ...
        } else if (target.className === 'done') {
             ...
        }
    }
    if (target.tagName === 'BUTTON') {
        ...
    }
});

 Vous gagnerez en temps de traitement JS

Utiliser les id

Il est toujours plus rapide en JS de travailler sur les id que sur les class ou les tags HTML

Utiliser le FOR plutot que le $.each

Etant une iteration native, c'est toujours plus rapide de passer par le for. le $.each.

Créer une variable pour utiliser le résultat d"un selecteur jQuery

Si vous savez que vous allez réutiliser le résultat d'un sélecteur jQuery, il faut impérativement le mettre en variable ce qui permettra d'éviter un autre appel.

Exemple:

$('section div.maClasse').css({border: '1px solid #dedede'});
$('section div.maClasse').html('test');

utilisez plutot :

var divs = $('section div.maClasse');
divs.css({border: '1px solid #dedede'});
divs.html('test');

 Utiliser jsPerf pour améliorer la performance de vos scripts

jsperf.com permet de tester son code codé de différente manière et ainsi de comparer les performances.

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