innerHTML-bench.js

function benchmark (callback) {
  var start = new Date().getMilliseconds();
  callback(function () {
    var end = new Date().getMilliseconds();
    console.log("This operation took " + (end - start) + " milliseconds.");
  });
}

benchmark(function (done) {
  var oldInnerHTML = document.body.innerHTML;
  document.body.innerHTML = "";
  setTimeout(function () {
    document.body.innerHTML = oldInnerHTML;
    done();
  });
});

jQuery-modified.js

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

<script>
  var isSignedIn = false,
      signedInUser = null;
      
  function render () {
    var container = getELementById("container");
    
    if (isSignedIn) {
      container.innerHTML = "<p>" + signedInUser + "</p>";
    } else {
      container.innerHTML = "<p>Not signed in</p>";
    }
  }
  
  $(window).on("signin", function (user) {
    isSignedIn = true;
    signedInUser = user;
    render();
  });
  
  $(window).on("signout", function () {
    i 
  });
</script>

jQuery-trivial.js

<div>
  <p id="user">
    Not signed in
  </p>
</div>

<script>
  $(window).on("signin", function (user) {
    getElementById("user").innerText = "Signed as " + user;
  });
</script>

<script>
  $(window).on("signout", function () {
    getElementById("user").innerText = "Not signed in";
  });
</script>