console.log performance w/ custom logging (v9)

Revision 9 of this benchmark created by Cody on

Preparation HTML

<div id="container"></div>

Setup

var container = document.getElementById("container"),
    obj = {
      one: 1,
      two: 2,
      three: {
        four: 4,
        five: "five",
        six: {
          seven: [8, 9, 10, 11, 12],
          thirteen: [14, 15, 16, 17]
        },
        eighteen: 18
      },
      nineteen: "nineteen"
    }
  window.loggingAllowed = true;
  window._logWorker = function(toLog, directive) {
    if (window.loggingAllowed && typeof console === "object") {
      var prelog = "",
        determineMethod = function(method) {
          if (typeof console[method] !== "undefined") {
            if (typeof console[method].apply !== "undefined") {
              return function() {
                console[method].apply(console, arguments);
              };
            }
            return console[method];
          }
          return determineMethod("log");
        },
        loggingMethod = determineMethod("log");
  
  
      switch (directive) {
        case "log":
          prelog = "LOG ";
          // prelog = "LOG @ " + [hour,min,sec,ms].join(":");
          loggingMethod = determineMethod("log");
          break;
        case "warning":
          prelog = "WARNING ";
          // prelog = "WARNING @ " + [hour,min,sec,ms].join(":");
          loggingMethod = determineMethod("warn");
          break;
        case "error":
          prelog = "CAUGHT_ERROR ";
          // prelog = "CAUGHT_ERROR @ " + [hour,min,sec,ms].join(":");
          loggingMethod = determineMethod("error");
          break;
        case "info":
          prelog = "INFO ";
          // webkit treats info like log (exactly), so we'll make it debug
          loggingMethod = determineMethod($.browser.webkit ? "debug" : "info");
          break;
          // add more cases for future log directives
      }
  
      var i = toLog.length,
        j = 0;
  
      if (i > 1)
        loggingMethod(prelog + "...");
  
      for (j = 0; j < i; j++) {
        if (typeof console.dir === "function" && Object.prototype.toString.call(toLog[j]) === '[object Array]') {
          if (i === 1)
            loggingMethod(prelog + "...");
          console.dir(toLog[j]);
        } else {
          loggingMethod(i === 1 ? prelog + " --> " : "    ", toLog[j]);
        }
  
      };
  
      if (directive == "error" && console.trace && !$.browser.webkit) {
        // webkit does this by default in its error log
        console.trace();
      }
  
  
    }
  };
  
  
  window.log = (function() {
    if (typeof window.console !== "undefined") {
      if (false || typeof window.console.debug !== "undefined") {
        return console.debug;
      } else if (false || typeof window.console.log !== "undefined") {
        return console.log;
      }
    }
    return function() {};
  })();
  
  try {
    window.log("Initializing log(). ", "Your browser should support the preservation of line numbers when making calls to log().");
  } catch (err) {
    window.log = function() {
      _logWorker(arguments, "log");
    };
    window.log("Initializing log(). ", "Unfortunately, your browser does NOT support the preservation of line numbers when making calls to log().");
  }
  
  window.warn = function() {
    _logWorker(arguments, "warning");
  };
  window.logError = function() {
    _logWorker(arguments, "error");
  };
  window.logInfo = function() {
    _logWorker(arguments, "info");
  };
  
  
  
  function justDoSomething() {
    for (var i = 0; i < 1000; i++) {
      var div = document.createElement("DIV");
      var span = document.createElement("SPAN");
      div.appendChild(span);
      container.appendChild(div);
    }
  }
  
  function doSomethingAndWriteObjToLog() {
    for (var i = 0; i < 1000; i++) {
      var div = document.createElement("DIV");
      var span = document.createElement("SPAN");
      div.appendChild(span);
      container.appendChild(div);
    }
    log(obj);
  }
  
  function doSomethingAndWriteObjToConsole() {
    for (var i = 0; i < 1000; i++) {
      var div = document.createElement("DIV");
      var span = document.createElement("SPAN");
      div.appendChild(span);
      container.appendChild(div);
    }
    console.log(obj);
  }
  
  function doSomethingAndLogWhenDone() {
    for (var i = 0; i < 1000; i++) {
      var div = document.createElement("DIV");
      var span = document.createElement("SPAN");
      div.appendChild(span);
      container.appendChild(div);
    }
    log("Completed DOM operations!");
  }
  
  function doSomethingAndConsoleWhenDone() {
    for (var i = 0; i < 1000; i++) {
      var div = document.createElement("DIV");
      var span = document.createElement("SPAN");
      div.appendChild(span);
      container.appendChild(div);
    }
    console.log("Completed DOM operations!");
  }

Teardown



            container.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
run plain
justDoSomething();
ready
log() object
doSomethingAndWriteObjToLog();
ready
console.log() object
doSomethingAndWriteObjToConsole();
ready
console.log() string
doSomethingAndConsoleWhenDone();
ready
log() string
doSomethingAndLogWhenDone();
ready

Revisions

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