ajax HTML vs JSON

JavaScript performance comparison

Test case created

Info

For this test we are assuming that the user is logged in.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="content">
</div>

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
HTML
 
$("#content").html('<ul class="user"><li><a href="http://www.domain.com/profile">Username</a></li><li><a href="http://www.domain.com/logout">Log Out</a></li><li><a href="http://www.domain.com/dashboard" class="highlight">Dashboard</a></li></ul>');
 pending…
JSON
 
var data = {
  "data": {
    "is_default_profile": false,
    "is_premium": true,
    "user_name": "Username",
    "client": true,
    "dietitian": false,
    "is_ng_version": true
  }
};

var links_logged_in = $("<ul>").addClass("links").html($("<li>").html($("<a>").attr("href", "http://www.domain.com/products/premium").html("<span>FitDay Premium</span>"))).append($("<li>").html($("<a>").attr("href", "http://www.domain.com/products/fitday-pc").html("<span>FitDay PC</span>")));

if (data.data) {
  var profile_link = "/app/home/profile";
  var home_link = "/app/home/dashboard";
  var home_link_text = "Dashboard";
  var dietitian_link = "/dietitian";
  if (data.data.is_premium) {
    profile_link = "/app/premium/home/profile";
    home_link = "/app/premium/home/dashboard";
  }
  if (!data.data.is_ng_version) {
    profile_link = "/fitness/Profile.html";
    home_link = "/fitness/FoodLog.html";
    home_link_text = "Food Log";
  }
  if (data.data.client || data.data.dietitian) {
    dietitian_link = "/app/premium/dietitian/messages";
  }
  $("#content").html($("<ul>").addClass("user").html($("<li>").html($("<a>").attr("href", "http://www.domain.com" + profile_link).html(data.data.user_name))).append($("<li>").html($("<a>").attr("href", "http://www.domain.com/fitness/Logout.html").html("Log Out"))).append($("<li>").html($("<a>").attr("href", "http://www.domain.com" + home_link).html(home_link_text).addClass("highlight"))));
}
 pending…
Smarter JSON
 
var data = {
  "data": {
    "is_default_profile": false,
    "is_premium": true,
    "user_name": "Username",
    "client": true,
    "dietitian": false,
    "is_ng_version": true
  }
};

if (data.data) {
  var profile_link = "/profile";
  var home_link = "/dashboard";
  var home_link_text = "Dashboard";
  var dietitian_link = "/dietitian";
  if (data.data.is_premium) {
    profile_link = "/profile";
    home_link = "dashboard";
  }
  if (!data.data.is_ng_version) {
    profile_link = "/profile";
    home_link = "/dashboard";
    home_link_text = "Dashboard";
  }
  if (data.data.client || data.data.dietitian) {
    dietitian_link = "/app/premium/dietitian/messages";
  }
  $("#content").html('<ul class="user"><li><a href="http://www.domain.com' + profile_link + '">' + data.data.user_name + '</a></li><li><a href="http://www.domain.com/logout">Log Out</a></li><li><a href="http://www.domain.com' + home_link + '" class="highlight">' + home_link_text + '</a></li></ul>');
}
 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