Text width (v10)

Revision 10 of this benchmark created by Sam on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var create = function(hide) {
    var span = document.createElement('span');
    if (hide) span.style.visibility = "hidden";
    span.style.whiteSpace = "nowrap";
    span.style.margin = span.style.padding = 0;
    document.body.appendChild(span);
    return span;
  };
  
  var shown = create(false);
  var hidden = create(true);
  
  var measureWidth = function(text) {
    shown.innerHTML = text;
    return shown.offsetWidth;
  }
  
  var measureWidthHidden = function(text) {
    hidden.innerHTML = text;
    return hidden.offsetWidth;
  }
  
  var canvasMeasureWidth = function(text) {
    if (!jQuery._cacheCanvas) {
      var canvas = document.createElement('canvas');
      var docFragment = document.createDocumentFragment();
      docFragment.appendChild(canvas);
      jQuery._cacheCanvas = canvas;
    }
    return jQuery._cacheCanvas.getContext("2d").measureText(text).width;;
  }
  
  var text = "YOU SHALL NOT PASS!";
  var i = 10000;

Teardown



            document.body.removeChild(shown);
  document.body.removeChild(hidden);

Test runner

Ready to run.

Testing in
TestOps/sec
Check width on not hidden
measureWidth(text + (i++));
ready
The same with hidden
measureWidthHidden(text + (i++));
ready
Cached canvas
canvasMeasureWidth(text + (i++));
ready

Revisions

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