css.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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. jQuery(function(){
  12. var p = old("p");
  13. var s = (new Date).getTime();
  14. for ( var n = 0; n < 5; n++ ) {
  15. for ( var i = 0; i < num; i++ ) {
  16. p.css("position");
  17. p.css("top");
  18. p.css("left");
  19. p.css("display");
  20. }
  21. }
  22. var oldNum = (new Date).getTime() - s;
  23. p = jQuery("p");
  24. s = (new Date).getTime();
  25. for ( var n = 0; n < 5; n++ ) {
  26. for ( var i = 0; i < num; i++ ) {
  27. p.css("position");
  28. p.css("top");
  29. p.css("left");
  30. p.css("display");
  31. }
  32. }
  33. var curNum = (new Date).getTime() - s;
  34. jQuery("#num").text( old.fn.jquery + ": " + oldNum + " " + jQuery.fn.jquery + ": " + curNum );
  35. });
  36. jQuery(function(){
  37. var p = old("p");
  38. var s = (new Date).getTime();
  39. for ( var n = 0; n < 5; n++ ) {
  40. for ( var i = 0; i < num; i++ ) {
  41. p.css("position", "relative");
  42. p.css("top", 15);
  43. p.css("left", 15);
  44. p.css("display", "block");
  45. }
  46. }
  47. var oldNum = (new Date).getTime() - s;
  48. p = jQuery("p");
  49. s = (new Date).getTime();
  50. for ( var n = 0; n < 5; n++ ) {
  51. for ( var i = 0; i < num; i++ ) {
  52. p.css("position", "relative");
  53. p.css("top", 15);
  54. p.css("left", 15);
  55. p.css("display", "block");
  56. }
  57. }
  58. var curNum = (new Date).getTime() - s;
  59. jQuery("#num2").text( old.fn.jquery + ": " + oldNum + " " + jQuery.fn.jquery + ": " + curNum );
  60. });
  61. </script>
  62. <style>p { position: absolute; top: 5px; left: 5px; }</style>
  63. </head>
  64. <body>
  65. <p><strong>Getting Values:</strong> <span id="num">Loading...</span></p>
  66. <p><strong>Setting Values:</strong> <span id="num2">Loading...</span></p>
  67. </body>
  68. </html>