384400/ benchmark-javascript.md

## benchmark-javascript.md

      
    Raw
  

               benchmark-javascript.md
            
          
    Comment mesurer les performances d'un code en JavaScript ?

Quand on a le choix entre deux (groupes d') instructions, il peut être opportun d'en comparer les performances avant de prolonger un développement. L'intérêt est assurément théorique : aucun utilisateur lambda ne lancera 20 000 itérations ! Cependant, une comparaison peut constituer une aide au choix.
En matière de Benchmarking, [jsPerf] (https://jsperf.com/) constitue le site de référence dans le monde du développement. Néanmoins, l'inscription est plutôt fastidieuse.
Voici pourquoi, nous présentons un code rudimentaire, sans doute perfectible, qui permet de mesurer facilement la performance d'un code en JavaScript. Ce code a été mentionné dans une conversation sur [stackoverflow] (http://stackoverflow.com/questions/111368/how-do-you-performance-test-javascript-code).
Les résultats du test s'affichent dans la console du navigateur. Ici, [Google Chrome] (https://www.google.com/chrome/browser/desktop/index.html) est commode d'emploi.

  
## benchmark-javascript.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Benchmark</title>
</head>
<body>
<button id="es" class="language-g11n">ES</button>
<button id="fr" class="language-g11n">FR</button>
<button id="en" class="language-g11n">EN</button>
<script>
var iterations = 20000;
console.time('Fonction #1');
for (var i = 0; i < iterations; i++ ) {
  // Premier bloc d'instructions à comparer
	var languagesList = document.getElementsByClassName('language-g11n');
};
console.timeEnd('Fonction #1')
console.time('Fonction #2');
for (var i = 0; i < iterations; i++ ) {
// Deuxième bloc d'instructions à comparer
	var languagesList = document.querySelectorAll('.language-g11n');
};
console.timeEnd('Fonction #2');
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Benchmark</title>
	</head>
	<body>
	<button id="es" class="language-g11n">ES</button>
	<button id="fr" class="language-g11n">FR</button>
	<button id="en" class="language-g11n">EN</button>
	<script>
	var iterations = 20000;
	console.time('Fonction #1');
	for (var i = 0; i < iterations; i++ ) {
	// Premier bloc d'instructions à comparer
	var languagesList = document.getElementsByClassName('language-g11n');
	};
	console.timeEnd('Fonction #1')
	console.time('Fonction #2');
	for (var i = 0; i < iterations; i++ ) {
	// Deuxième bloc d'instructions à comparer
	var languagesList = document.querySelectorAll('.language-g11n');
	};
	console.timeEnd('Fonction #2');
	</script>
	</body>
	</html>