jquery width outerwidth innerwidth

JavaScript performance comparison

Revision 3 of this test case created by Assassinator 10,000

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="header">
</div>
<table id="table">
  <tr>
    <td>
    </td>
  </tr>
</table>
<script>
Benchmark.prototype.setup = function() {
    /*$("#table td").each(function(value, index) {
      $(this).text(Math.random().toString(36).substring(7));
    }); */

};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Width
$("#table tr td").each(function(index, value) {
  $("#header").width($(this).width());
});
pending…
outerWidth
$("#table tr td").each(function(index, value) {
$("#header").width($(this).outerWidth());
});
pending…
innerWidth
$("#table tr td").each(function(index, value) {
$("#header").width($(this).innerWidth());
});
pending…
css
$("#table tr td").each(function(index, value) {
$("#header").width( $(this).css('width'));
});
pending…
native
$("#table tr td").each(function(index, value) {
$("#header").width( this.style.width);
});
pending…
native clientWidth
$("#table tr td").each(function(index, value) {
$("#header").width( this.clientWidth);
});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment