Text width (v12)

Revision 12 of this benchmark created 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);
  
  $.fn.measureWidth = function() {
    shown.innerHTML = this.outerHTML;
    return shown.offsetWidth;
  }
  
  $.fn.measureWidthHidden = function() {
    hidden.innerHTML = this.outerHTML;
    return hidden.offsetWidth;
  }
  
  $.fn.canvasMeasureWidth = function() {
    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!";

Test runner

Ready to run.

Testing in
TestOps/sec
Check width on not hidden
$("<p>" + text + "</p>").measureWidth();
ready
The same with hidden
$("<p>" + text + "</p>").measureWidthHidden();
ready
Cached canvas
$("<p>" + text + "</p>").canvasMeasureWidth();
ready

Revisions

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