brief look at html() vs text()

JavaScript performance comparison

Test case created by David Thomas

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
</script>
<script src="//timeago.yarp.com/jquery.timeago.js">
</script>
<script src="//imakewebthings.github.com/jquery-waypoints/waypoints.min.js">
</script>
<div data-role="page" id="index">
  <div data-theme="a" data-role="header">
    <h3>
      First Page
    </h3>
    <a href="#second" class="ui-btn-right">Next</a>
  </div>
  <div data-role="content">
  </div>
  <div data-theme="a" data-role="footer" data-position="fixed">
  </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var siteData = {
      "name": "Site Name",
      "logo": "",
      "theme": "b",
      "fullSiteLink": "http://www.google.com",
      "pages": [{
        "id": "1364668689503",
        "name": "Page Title",
        "type": "basic",
        "components": {
          "img": "",
          "text": "Page content"
        }
      }]
    };
};
</script>

Preparation code output

First Page

Next

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
with html()
$(document).on('pagebeforeshow', '#index', function() {
  $(this).find('[data-role="header"] h3').html(siteData.name);
});
pending…
with text()
$(document).on('pagebeforeshow', '#index', function() {
  $(this).find('[data-role="header"] h3').text(siteData.name);
});
pending…

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

Compare results of other browsers

0 comments

Add a comment