Find Twitter Bootstrap Environment: native JS vs. jQuery

Benchmark created by Andrew Jameson on

Description

Compares a native JavaScript function and a jQuery equivalent to determine the environment in which Twitter's Bootstrap is running (i.e., which view-port size).

Preparation HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Native
  var envs = ["xs", "sm", "md", "lg"],
    doc = window.document,
    temp = doc.createElement("div");

  doc.body.appendChild(temp);

  for (var i = envs.length - 1; i >= 0; i--) {
    var env = envs[i];

    temp.className = "hidden-" + env;

    if (temp.offsetParent === null) {
      doc.body.removeChild(temp);
      return env;
    }
  }
  return "";
ready
jQuery
  var envs = ["xs", "sm", "md", "lg"];

  var $el = $("<div>");
  $el.appendTo($("body"));

  for (var i = envs.length - 1; i >= 0; i--) {
    var env = envs[i];

    $el.addClass("hidden-" + env);
    if ($el.is(":hidden")) {
      $el.remove();
      return env;
    }
  }
  return "";
ready

Revisions

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

  • Revision 1: published by Andrew Jameson on