speed/css.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4         <title>Test Event Handling Performance</title>
   5         <script src="benchmark.js"></script>
   6         <script src="jquery-basis.js"></script>
   7         <script>var old = jQuery.noConflict(true);</script>
   8         <script src="../dist/jquery.js"></script>
   9         <script>
  10         var num = 400;
  11
  12         jQuery(function(){
  13                 var p = old("p");
  14                 var s = (new Date).getTime();
  15
  16                 for ( var n = 0; n < 5; n++ ) {
  17                         for ( var i = 0; i < num; i++ ) {
  18                                 p.css("position");
  19                                 p.css("top");
  20                                 p.css("left");
  21                                 p.css("display");
  22                         }
  23                 }
  24
  25                 var oldNum = (new Date).getTime() - s;
  26
  27                 p = jQuery("p");
  28                 s = (new Date).getTime();
  29
  30                 for ( var n = 0; n < 5; n++ ) {
  31                         for ( var i = 0; i < num; i++ ) {
  32                                 p.css("position");
  33                                 p.css("top");
  34                                 p.css("left");
  35                                 p.css("display");
  36                         }
  37                 }
  38
  39                 var curNum = (new Date).getTime() - s;
  40
  41                 jQuery("#num").text( old.fn.jquery + ": " + oldNum + " " + jQuery.fn.jquery + ": " + curNum );
  42         });
  43
  44         jQuery(function(){
  45                 var p = old("p");
  46                 var s = (new Date).getTime();
  47
  48                 for ( var n = 0; n < 5; n++ ) {
  49                         for ( var i = 0; i < num; i++ ) {
  50                                 p.css("position", "relative");
  51                                 p.css("top", 15);
  52                                 p.css("left", 15);
  53                                 p.css("display", "block");
  54                         }
  55                 }
  56
  57                 var oldNum = (new Date).getTime() - s;
  58
  59                 p = jQuery("p");
  60                 s = (new Date).getTime();
  61
  62                 for ( var n = 0; n < 5; n++ ) {
  63                         for ( var i = 0; i < num; i++ ) {
  64                                 p.css("position", "relative");
  65                                 p.css("top", 15);
  66                                 p.css("left", 15);
  67                                 p.css("display", "block");
  68                         }
  69                 }
  70
  71                 var curNum = (new Date).getTime() - s;
  72
  73                 jQuery("#num2").text( old.fn.jquery + ": " + oldNum + " " + jQuery.fn.jquery + ": " + curNum );
  74         });
  75         </script>
  76         <style>p { position: absolute; top: 5px; left: 5px; }</style>
  77 </head>
  78 <body>
  79         <p><strong>Getting Values:</strong> <span id="num">Loading...</span></p>
  80         <p><strong>Setting Values:</strong> <span id="num2">Loading...</span></p>
  81 </body>
  82 </html>