Text width

Benchmark created on

Preparation HTML

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

Setup

$.fn.measureWidth = function(params) {
    params = params || {};
    var span = document.createElement('span');
    if (params.hide) span.style.visibility = "hidden";
    span.style.whiteSpace = "nowrap";
    span.style.margin = span.style.padding = 0;
    span.innerHTML = this.outerHTML;
    document.body.appendChild(span);
    var width = span.offsetWidth;
    document.body.removeChild(span);
    return width;
  }
  
  $.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>").measureWidth({
  hide: true
});
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.