tool-navigation-improvement

JavaScript performance comparison

Test case created by Florian Maertl

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="nav-tool">
</div>
<script>
Benchmark.prototype.setup = function() {
    tNConf = {
      skipTool: function(tool) {
        return tool.name() == "search";
      },
      getNavElement: function(tool) {
        return $("<div>", {
          text: tool.title()
        })
      },
      postbuild: new Function(),
      click: function() {
        contentM.openTool($(this).attr("id").split("_")[1]);
      },
      startTool: "apps"
    }
   
    var Tool = function(name, title, config) {
        this.name = function() {
          return name
        }
        this.title = function() {
          return name
        }
        }
       
       
       
    var contentMConstructor = function() {
        var tools = [new Tool("apps"), new Tool("news"), new Tool("tasks"), new Tool("docs"), new Tool("profil"), new Tool("search")];
        this.allTools = function() {
          return tools;
        }
        }
    var contentM = new contentMConstructor();
};

Benchmark.prototype.teardown = function() {
    $(".main-tool").remove();
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
old
var toolList = $("#nav-tool");
var tools = contentM.allTools();
for (var i = 0; i < tools.length; i++) {
  if (!tNConf.skipTool(tools[i])) {
    var name = tools[i].name();
    var navElement = tNConf.getNavElement(tools[i]);
    toolList.append(navElement.addClass("main-tool").data("mc.tool", name));
    tools[i]._navElement = navElement;
  }
}
tNConf.postbuild(toolList);
toolList.on("click.mc", ".main-tool", tNConf.click);
pending…
new
var toolList = $("#nav-tool");
var tools = contentM.allTools();
for (var i = 0; i < tools.length; i++) {
  if (!tNConf.skipTool(tools[i])) {
    var name = tools[i].name();
    toolList.append(tNConf.getNavElement(tools[i]).addClass("main-tool").attr("id", "tool_" + name).data("tool", name));
  }
}
tNConf.postbuild(toolList);
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment