\r
selectedBenchmarks = readBenchmarkSelection();\r
selectPanel.hide();\r
- $("#startrace").text("Stop Race");\r
+ $("#startrace").text("Stop the race");\r
$("#results").show();\r
\r
initResultsTable(ds, selectedBenchmarks);\r
}\r
};\r
private Benchmark[] selectedBenchmarks;\r
- private PopupPanel selectPanel = new PopupPanel();\r
+ private PopupPanel selectPanel = new PopupPanel() {{\r
+ addStyleName("spanel");\r
+ }};\r
+ private PopupPanel helpPanel = new PopupPanel() {{\r
+ setAutoHideEnabled(true);\r
+ setWidget(new HTML($("#help").html()));\r
+ addStyleName("help");\r
+ }};\r
private boolean shareIframes = true;\r
\r
private double trackWidth;\r
public void iframeReadyCallback() {\r
writeTestContent($(".ibench").contents().find("body").get(0));\r
gwtiframe = $(".ibench").eq(0).contents().get(0);\r
- $("#startrace").text("Click to start the race");\r
+ $("#startrace").text("Start the race");\r
$("#startrace").click(ask ? askBenchMarks: runBenchMarks);\r
+ $("#about").click(new Function(){\r
+ public void f() {\r
+ helpPanel.center();\r
+ }\r
+ });\r
}\r
\r
/**\r
\r
<html>\r
<head>\r
- <title>GwtQuery BenchMarks</title>\r
+ <title>GwtQuery Benchmarks</title>\r
<style>\r
* {\r
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;\r
#startrace {\r
cursor: pointer;\r
}\r
- \r
- #selectcontainer {\r
- color: black;\r
- background: #808080;\r
- border: 2px solid #936630;\r
- width: 500px;\r
- }\r
-\r
body, select {\r
background-color: black;\r
}\r
#racefield {\r
background-image: url(images/bench/grass-texture-small.jpg); \r
background-repeat: repeat;\r
- -moz-border-radius: 15px;\r
- border-radius: 15px;\r
+ border-radius: 9px;\r
}\r
\r
.base {\r
font-size: 85%;\r
color: green;\r
}\r
+ .lnk {\r
+ float: right;\r
+ margin-left: 20px;\r
+ color: plum;\r
+ margin-top: 10px;\r
+ font-size: 12px;\r
+ text-decoration: underline;\r
+ cursor: pointer;\r
+ }\r
+ .lnk:hover {\r
+ color: red;\r
+ }\r
+ h2 {\r
+ float: left; \r
+ color: white; \r
+ border-bottom: 1px solid gray;\r
+ width: 400px;\r
+ }\r
+ \r
+ .gwt-PopupPanel {\r
+ max-width: 80%;\r
+ }\r
+ .popupContent {\r
+ background-color: LightSlateGrey;\r
+ border: 2px solid grey;\r
+ overflow: auto;\r
+ border-radius: 7px;\r
+ padding: 14px;\r
+ }\r
+ .clear {\r
+ clear: both;\r
+ }\r
+ button {\r
+ color: black;\r
+ }\r
</style>\r
</head>\r
<body>\r
- <h2 style="color: white; border-bottom: 1px solid gray">\r
- GWTSpeed - GWT Query benchmarks\r
+ <h2>\r
+ GwtQuery benchmarks\r
</h2>\r
- <div id="startrace" style="color: red">Loading Javascript frameworks, please wait ...</div><br/>\r
+ <div class='lnk' id="about">About</div>\r
+ <div class='lnk' id="startrace" >Loading Javascript frameworks, please wait ...</div><br/>\r
+ <div class='clear'></div>\r
<div id="racetrack" style="height: 0px; overflow: hidden;">\r
<div id="racefield">\r
</div>\r
</table>\r
</div>\r
\r
- <div class='base'>Based on <a href='http://mootools.net/slickspeed/'>SlickSpeed</a> test</div> \r
<script language="javascript" src="gwtquery.samples.GwtQueryBench.nocache.js"></script>\r
\r
+ <div id='help' style='display: none'>\r
+ This application has been designed to compare the speed between the different css selector-engines existing in <a href='http://gwtquery.googlecode.com'>gwtquery</a>, and against other javascript libraries.\r
+ <br/>\r
+ The html document and selectors used for the benchmark have been taken from the <a href='http://mootools.net/slickspeed/'>SlickSpeed</a> test.\r
+ <br/>\r
+ <br/>\r
+ Click 'start the race' to test the selectors against most popular frameworks. \r
+ <br/>\r
+ If you wanted to experiment with other frameworks or different gquery engine implementations, append the parameter ask=true to the url and select the options in the popup window after clicking 'start'.\r
+ <br/>\r
+ Because normally css selectors takes less than 1 or 2 millisecons, each selector is run during a minimum of 200ms for each engine, then we divide the total time between the number of iterations and put this value in the cell, <br/>\r
+ marking in green the faster engine.\r
+ <br/>\r
+ If an engine does not support a selector we put the word 'Error' in the corresponding cell and penalize the engine setting a value of 200ms for that iteration.\r
+ <br/>\r
+ The last row represents the acumulated time of the test for each engine.\r
+ <br/>\r
+ <br/>\r
+ \r
+ Some times, you could obtain different results when running the test with the same browser.\r
+ <br/>\r
+ This is due to random browser or system events which makes the current selector running delay some milliseconds. \r
+ <br/>\r
+ To avoid that, try to run the test in a browser running just one window and one tab, and in a computer without activity: close all applications, do not move the mouse etc.\r
+ <br/>\r
+ <br/>\r
+ Leyend:\r
+ <br/>\r
+ - gwt_compiled: run css selectors which were optimized during the gwt compilation.\r
+ <br/>\r
+ - gwt_dynamic: evaluates selectors in runtime using the most suitable engine for this browser.\r
+ <br/>\r
+ - jquery, dojo, prototype ... : runs the selectors using those external libraries.\r
+ <br/>\r
+ - gwt_*: different runtime engines, some are experimental, and they could fail depending on the browser.\r
+ <br/>\r
+ <br/>\r
+ Sources:\r
+ <br/>\r
+ <a href='http://code.google.com/p/gwtquery/source/browse/trunk/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java'>Source code of this application</a> is available in the samples module of gwtquery.\r
+ <br/>\r
+ <br/>\r
+ - The GwtQuery team.\r
+ </div>\r
</body>\r
</html>\r
projects / gwtquery.git / commitdiff