Evenement jquery et temps d'execution

[mantalo]

Bonjour,

J'ai des questions sur un problème qui me laisse perplexe.
Je souhaite me faire un ptit benchmark pour tester la rapidité de certaines instruction jquery. pour ce faire j'ai mis en place ce code:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
_timer = (function () {
	var _start, _stop;
	return {
	        start  : function () { _start = new Date().getTime(); },
	        stop   : function () { _stop  = new Date().getTime(); },
		report : function () { return _stop - _start;         },
		reset  : function () { _stop  = _start = 0;           }
        };
})();
// ce code à été copier, mais je n'ai plus la source dsl:/	
 
	var iter = 5000;
 
	var e1 = "$('#toto').find('p').toggleClass('pedro')";
	var e2 = "$('#toto p').toggleClass('pedro')";
 
	var un = eval("_timer.reset(); _timer.start(); for(i=0 ; i<"+iter+"; i++) {"+e1+" } _timer.stop();_timer.report();");
	var deux = eval("_timer.reset(); _timer.start(); for(i=0 ; i<"+iter+"; i++) {"+e2+" } _timer.stop();_timer.report();");

le but du eval état de pouvoir ecrire directement le code a tester dans un formulaire.

Voila comme j'ai pensé mon code. Pour que le eval n'impacte pas sur le test, j'ai mis le timer dans le eval aussi.
Ce code fonctionne tres bien.

A ce stade je désire utiliser un evenement click sur un bouton pour lancer le test. le code devient:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//------------------------------------------------------------------------------------------------------------------------------------------------------------
$(document).ready(function() {
 
	_timer = (function () {
		var _start, _stop;
		return {
			start  : function () { _start = new Date().getTime(); },
			stop   : function () { _stop  = new Date().getTime(); },
			report : function () { return _stop - _start;         },
			reset  : function () { _stop  = _start = 0;           }
			};
	})();
 
$("#submit").click(function(){
	var iter = 5000;
 
	var e1 = "$('#toto').find('p').toggleClass('pedro')";
	var e2 = "$('#toto p').toggleClass('pedro')";
 
	var un = eval("_timer.reset(); _timer.start(); for(i=0 ; i<"+iter+"; i++) {"+e1+" } _timer.stop();_timer.report();");
	var deux = eval("_timer.reset(); _timer.start(); for(i=0 ; i<"+iter+"; i++) {"+e2+" } _timer.stop();_timer.report();");
 
 
});	
});

Tout simplement, pourtant, il y a un soucis.
Dans le premier test e1 = 60ms et e2 = 150ms. dans le cas 2, on monte a e1 = 520ms et e2 = 535ms. Pourquoi y a t'il une augmentation du temps alors que le timer se déclenche dans l'événement.
Et même pourquoi l'écart se résorbe ? même si le temps d'éxecution de 5000 itérations prends plus de temps, l'écart devrait être le même.

Je fais appel au personne connaissant le fonctionnement interne de jquery. je vous remercie pour vos réponse à ces 2 questions.

[danielhagnoul]

Bonsoir

Attention aux variables globales, ne pas oublier var !
eval() c'est le diable !

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>	
 
	var objTimer = (function($){
		var _start, _stop;
 
		return {
			start  : function(){ _start = $.now(); },
			stop   : function(){ _stop  = $.now(); },
			report : function(){ return _stop - _start; },
			reset  : function(){ _stop  = _start = 0; }
		};
	})(jQuery);
 
	$(function(){
		var iter = 5000;
 
		var testUn = function(){
			objTimer.reset();
			objTimer.start();
 
			for(var i = 0; i < iter; i++){
				$('#toto').find('p').toggleClass('pedro');
			}
 
			objTimer.stop();
 
			return objTimer.report();
		};
 
		var testDeux = function(){
			objTimer.reset();
			objTimer.start();
 
			for(var i = 0; i < iter; i++){
				$('#toto p').toggleClass('pedro');
			}
 
			objTimer.stop();
 
			return objTimer.report();
		};
 
 
		$("#btn").click(function(){
			console.log ( testUn(), testDeux() );
		});
	});
 
</script>

[mantalo]

Bonjour,

Là n'est pas la question. Ce système à pour est strictement privé et l'utilisation d'éval est pour avoir une interface graphique plus sympa à l'utilisation du bench.

La question est pourquoi l'évènement onclick allonge le temps du eval. Je ne connais pas bien le fonctionnement des évènements jquery mais en toute logique, le temps pour exécuter l'event est censé être plus long, mais le code exécuté à l’intérieur devrait quand à lui être le même.

Alors pourquoi ici, les temps sont quadruplés ...