build select + options .append vs concat

JavaScript performance comparison

Revision 3 of this test case created by Heavensrevenge

Info

Create select element + sub options using jquery.append vs string concat

Preparation code

<script src="//code.jquery.com/jquery-git2.min.js"></script>

<div id="folder"></div>
<script>
Benchmark.prototype.setup = function() {
    var $cFolder = $("#folder");
   
    var folderList = [
      {"path":"Bookmarks bar", "id":"1"},
      {"path":"Bookmarks bar/Downloads", "id":"114"},
      {"path":"Bookmarks bar/Downloads/Books", "id":"267"},
      {"path":"Bookmarks bar/Downloads/Builds", "id":"264"},
      {"path":"Bookmarks bar/Downloads/Compilers", "id":"265"},
      {"path":"Bookmarks bar/Downloads/File Upload Hosts", "id":"266"},
      {"path":"Bookmarks bar/Downloads/Music", "id":"268"},
      {"path":"Bookmarks bar/Games", "id":"112"},
      {"path":"Bookmarks bar/Google", "id":"111"},
      {"path":"Bookmarks bar/Main", "id":"110"},
      {"path":"Bookmarks bar/Misc", "id":"118"},
      {"path":"Bookmarks bar/Misc/Fun & Entertainment", "id":"122"},
      {"path":"Bookmarks bar/Misc/Science", "id":"123"},
      {"path":"Bookmarks bar/Misc/Speed Dial Pages", "id":"127"},
      {"path":"Bookmarks bar/Misc/Tools", "id":"124"},
      {"path":"Bookmarks bar/Programming", "id":"113"},
      {"path":"Bookmarks bar/Programming/Ajax & Javascript", "id":"330"},
      {"path":"Bookmarks bar/Programming/C & C++", "id":"331"},
      {"path":"Bookmarks bar/Programming/C# & .NET", "id":"332"},
      {"path":"Bookmarks bar/Programming/Checksum-Hashes", "id":"334"},
      {"path":"Bookmarks bar/Programming/Code Project Pages", "id":"333"},
      {"path":"Bookmarks bar/Programming/Crypto Stuff", "id":"335"},
      {"path":"Bookmarks bar/Programming/Database", "id":"336"},
      {"path":"Bookmarks bar/Programming/Erlang", "id":"337"},
      {"path":"Bookmarks bar/Programming/GPU & FPGA's", "id":"338"},
      {"path":"Bookmarks bar/Programming/Haskell", "id":"339"},
      {"path":"Bookmarks bar/Programming/HTML", "id":"340"},
      {"path":"Bookmarks bar/Programming/Kernel", "id":"341"},
      {"path":"Bookmarks bar/Programming/Malloc Implementations", "id":"342"},
      {"path":"Bookmarks bar/Programming/Misc", "id":"343"},
      {"path":"Bookmarks bar/Programming/Protocols", "id":"344"},
      {"path":"Bookmarks bar/Programming/Ruby", "id":"345"},
      {"path":"Bookmarks bar/Programming/SourceCode Version Control", "id":"346"},
      {"path":"Bookmarks bar/Programming/XML", "id":"347"},
      {"path":"Bookmarks bar/Social", "id":"115"},
      {"path":"Bookmarks bar/Social/Upload sites for social sharing", "id":"241"},
      {"path":"Bookmarks bar/Torrents", "id":"116"},
      {"path":"Bookmarks bar/Video", "id":"117"},
      {"path":"Bookmarks bar/Video/Anime", "id":"184"},
      {"path":"Bookmarks bar/Video/Movies", "id":"182"},
      {"path":"Bookmarks bar/Video/Shows", "id":"183"},
      {"path":"Bookmarks bar/Video/Video Lectures", "id":"185"},
      {"path":"Other bookmarks", "id":"2"},
      {"path":"Other bookmarks/3D", "id":"5607"},
      {"path":"Other bookmarks/Bookmarklets", "id":"5601"},
      {"path":"Other bookmarks/Keyboard Stuff", "id":"5603"},
      {"path":"Other bookmarks/Linux & BSD", "id":"5613"},
      {"path":"Other bookmarks/News", "id":"5610"},
      {"path":"Other bookmarks/Pastebins", "id":"5604"},
      {"path":"Other bookmarks/Podcasts & Forums", "id":"5609"},
      {"path":"Other bookmarks/Proxies", "id":"5605"},
      {"path":"Other bookmarks/To-do", "id":"5611"},
      {"path":"Other bookmarks/Tutorials", "id":"5612"},
      {"path":"Other bookmarks/URL Shorteners", "id":"5602"}
    ];
    var copy = folderList.slice(0);
   
};
</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
forEach append 1
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
folderList.forEach(function(item) {
  folderListHtml.append(new Option(item.path, item.id));
});
$cFolder.html(folderListHtml);
pending…
forEach append 2
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
folderList.forEach(function(item) {
  folderListHtml.append($('<option>', { value: item.id, text: item.path }));
});
$cFolder.html(folderListHtml);
pending…
object.keys append
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
Object.keys(folderList).forEach(function(item) {
  folderListHtml.append(new Option(folderList[item].path, folderList[item].id));
});
$cFolder.html(folderListHtml);
pending…
for-in 1
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
for (var item in folderList) {
  folderListHtml.append(new Option(folderList[item].path, folderList[item].id));
}
$cFolder.html(folderListHtml);
pending…
for-in 2
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
for (var item in folderList) {
  folderListHtml.append($('<option>', {value: folderList[item].id, text: folderList[item].path}));
}
$cFolder.html(folderListHtml);
pending…
while shift 1
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
while ((item = folderList.shift()) !== undefined) {
  folderListHtml.append(new Option(item.path, item.id));
}
$cFolder.html(folderListHtml);
folderList = copy.slice(0); // repopulate
pending…
while shift 2
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
while ((item = folderList.shift()) !== undefined) {
  folderListHtml.append($('<option>', {value: item.id, text: item.path}));
}
$cFolder.html(folderListHtml);
folderList = copy.slice(0); // repopulate
pending…
for shift 1
var folderListHtml = $("<select>").prop({ "id": "folder_list" });
for (var item = 0, len = folderList.length; item < len; item++) {
  folderListHtml.append(new Option(folderList[item].path, folderList[item].id));
}
$cFolder.html(folderListHtml);
pending…
array push 1
var folderListHtml = ['<select id="folder_list">'];
folderList.forEach(function(item) {
  folderListHtml.push(new Option(item.path, item.id).outerHTML);
});
folderListHtml.push(['</select>']);
$cFolder.html(folderListHtml.join(''));
pending…
string concat
var folderListHtml = '<select id="folder_list">';
folderList.forEach(function(item) {
  folderListHtml += (new Option(item.path, item.id).outerHTML);
});
folderListHtml += '</select>';
$cFolder.html(folderListHtml);
pending…
array push 3
var folderListHtml = ['<select id="folder_list">'], item = 0;
while ((item = folderList.shift()) !== undefined) {
  folderListHtml.push('<option', ' value="', item.id, '">', item.path, '</option>');
}
folderListHtml.push(['</select>']);
$cFolder.html(folderListHtml.join(''));
folderList = copy.slice(0); // repopulate
pending…
tmp.join
var folderListHtml = [], tmp = [], item = 0;
while ((item = folderList.shift()) !== undefined) {
  tmp.push('<option', ' value="', item.id, '">', item.path, '</option>');
}
$cFolder.html(['<select id="folder_list">', tmp.join('') , '</select>'].join(''));
folderList = copy.slice(0); // repopulate
pending…
push while ++
var folderListHtml = $("<select>").prop({ "id": "folder_list" }), item = 0;
while (item < folderList.length) {
  folderListHtml.append(new Option(folderList[item].path, folderList[item].id));
  item++;
}
$cFolder.html(folderListHtml);
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