pooz

JavaScript performance comparison

Test case created

Preparation code

<script src="http://dl.dropbox.com/u/40286472/icanhaz-no-mustache.js"></script>

<script src="http://dl.dropbox.com/u/40286472/mustache.js"></script>
<script>
  Benchmark.prototype.setup = function() {
    admin = false;
    
    ich.templates = {"live":"<li class='live result dropmenu_action'>\n<p>\n{{#status}}\n  {{status}}\n{{/status}}\n{{^status}}\n  {{title}}\n{{/status}}\n</p>\n<span>on {{name}}\n</span>\n</li>","users":"<li class='users result dropmenu_action'>\n<p>{{name}}\n</p>\n</li>","broadcasts":"<li class='broadcasts result dropmenu_action'>\n<p>{{title}}\n</p>\n<span>on {{user}}\n</span>\n</li>","dropdown":"<table cellpadding='0' cellspacing='0'>\n{{^empty.live}}\n<tr class='live'>\n<td class='label'></td>\n<td class='list'>\n<ul>\n{{#live}}\n{{> live}}\n{{/live}}\n</ul>\n</td>\n</tr>\n{{/empty.live}}\n{{^empty.users}}\n<tr class='users'>\n<td class='label'></td>\n<td class='list'>\n<ul>\n{{#users}}\n{{> users}}\n{{/users}}\n</ul>\n</td>\n</tr>\n{{/empty.users}}\n{{^empty.broadcasts}}\n<tr class='broadcasts'>\n<td class='label'></td>\n<td class='list'>\n<ul>\n{{#broadcasts}}\n{{> broadcasts}}\n{{/broadcasts}}\n</ul>\n</td>\n</tr>\n{{/empty.broadcasts}}\n</table>\n<div class='all'>\n<p class='dropmenu_action result'>All results...</p>\n</div>","gameselector-game":"<li class='game'>\n<a class='gamelink' href='#'>\n<span class='game_icon'>\n<img class='icon' src='{{images.tiny}}'>\n</span>\n<span class='game_meta'>\n<span class='name'>{{name}}\n</span>\n<span class='channels'>{{channel_count}}\n</span>\n</span>\n</a>\n</li>","chat-emoticon":"<span class='emo-{{id}} emoticon'></span>","chat-mod-buttons":"<a class='mod_button timeout' title='Timeout {{sender}}'><img alt=\"Timeout\" src=\"/images/xarth/g/g18_clock-00000080.png\" /></a><a class='mod_button ban' title='Ban {{sender}}'><img alt=\"Ban\" src=\"/images/xarth/g/g18_ban-00000080.png\" /></a><a class='mod_button unban' style='display:none;' title='Unban {{sender}}'><img alt=\"Unban\" src=\"/images/xarth/g/g18_unban-00000080.png\" /></a>","chat-line-action":"<li class='chat_from_{{sender}} line' data-sender='{{sender}}'>\n<p style='color:{{color}}'><span class='small'>{{timestamp}}&nbsp;</span>{{#showModButtons}}{{> chat-mod-buttons}}{{/showModButtons}}<span class='nick'>{{displayname}}</span><span class='chat_line' style='{{color}}'>{{message}}\n</span>\n</p>\n</li>","chat-line":"<li class='chat_from_{{sender}} line' data-sender='{{sender}}'>\n<p><span class='small'>{{timestamp}}&nbsp;</span>@tag{{#showModButtons}}{{> chat-mod-buttons}}{{/showModButtons}}<a class='nick' href='/{{sender}}' id='chat-line-{{id}}' style='color:{{color}}'>{{displayname}}</a>:&nbsp;<span class='chat_line'>{{message}}\n</span></p>\n</li>"}
    
    
    ich['chat-line-action'] = function (data, raw) {
                        data = data || {};
                        var result = Mustache.to_html(ich.templates['chat-line-action'], data, ich.templates);
                        return (ich.$ && !raw) ? ich.$(result) : result;
                    };
    
    
    
    message1 = {"message":"Its -16 F here...","history":false,"is_action":false,"recipient":"#smitegame","timestamp":"7:12","sender":"insanetacohater","nickname":"insanetacohater","color":"#2E8B57","profile_url":"http://www.justin.tv/insanetacohater/videos","tagtype":null,"tagname":null,"explanation":null}
    
        no_ich = function(info) {
                 if (admin && info.sender != "jtv") {
                      var modbuttons_template = '<a name="timeout" class="mod_button timeout" onclick="CurrentChat.timeout(\'%nickname\'); return false;" title="%timeout_title">' +
                                                  '<img src="/images/xarth/g/g18_clock-00000080.png" alt="Timeout" />' +
                                                '</a>' + 
                                                '<a name="ban" class="mod_button ban" onclick="CurrentChat.ban(\'%nickname\'); return false;" title="%ban_title">' +
                                                  '<img src="/images/xarth/g/g18_ban-00000080.png" alt="Ban" />' + 
                                                '</a>' + 
                                                '<a name="unban" class="mod_button unban" onclick="CurrentChat.unban(\'%nickname\'); return false;" style="display:none;" title="%unban_title">' + 
                                                  '<img src="/images/xarth/g/g18_unban-00000080.png" alt="Unban" />' +
                                                '</a>';
                      var modbuttons = modbuttons_template.replace(/\%nickname/g, info.sender);     
                      modbuttons = modbuttons.replace(/\%timeout_title/g, h_(i18n("Timeout %{username}"), {"username": info.sender}).replace(/\"/g, ''));
                      modbuttons = modbuttons.replace(/\%ban_title/g, h_(i18n("Ban %{username}"), {"username": info.sender}).replace(/\"/g, ''));
                      modbuttons = modbuttons.replace(/\%unban_title/g, h_(i18n("Unban %{username}"), {"username": info.sender}).replace(/\"/g, ''));
                  }
        
                  if(info.is_action) {
                      var line_template = '<li class="line jtv chat_from_%sender">' + 
                                              '<p style="color:%color">' +
                                                  '%timestamp%modbuttons' +
                                                  '<span class="nick">%displayname</span> ' +
                                                  '<span class="chat_line" style="color:%color">%message</span>' +
                                              '</p>' +
                                          '</li>';
                  } else {
                      var line_template = '<li class="line jtv chat_from_%sender><p>' +
                                                  '%timestamp%tag%modbuttons' +
                                                  '<a href="/%sender" style="color:%color" class="nick" id="%linkid">%displayname</a>:&nbsp;' +
                                              '<span class="chat_line">%message</span>' +
                                          '</p></li>';
                  }
        
                  // don't show timestamps for non-history messages
                  if(this.history_ended && !this.show_timestamps) {
                      info.timestamp = "";
                  } else {
                      info.timestamp = '<span class="small">' + info.timestamp + '&nbsp;</span>';
                  }
        
                  var is_ign = false;
                  var displayname = unescape(info.nickname);
                  if(displayname.indexOf("ign-") == 0) {
                      is_ign = true;
                      displayname = displayname.substr("ign-".length);
                  }
                  var tag = "";
                  if(info.tagtype){
                      var tag_template = '<span class="tag %tagtype" title="%tagname">%tagname</span>&nbsp;';
                      tag = tag_template.replace(/\%tagtype/g, info.tagtype).replace(/\%tagname/g, info.tagname);
                  }
                  if(info.pro){
                      var tag_template = '<span class="tag %tagtype" title="%tagname"><a href="http://justin.tv/payment/pro_account?utm_source=link&utm_medium=pro_link&utm_campaign=chat_badge">%tagname</a></span> ';
                      tag += tag_template.replace(/\%tagtype/g, "pro").replace(/\%tagname/g, "Pro");
                  }
                  if(info.subscriber){
                      var tag_template = '<span class="tag %tagtype %tagchannel" title="%tagname"><a href="/' + this.channel + '/subscribe" target="_blank">%tagname</a></span> ';
                      tag += tag_template.replace(/\%tagtype/g, "subscriber").replace(/\%tagname/g, "Subscriber").replace(/\%tagchannel/g, this.channel);
                  }
                  if(is_ign){
                      var tag_template = '<span class="tag %tagtype" title="%tagname">%tagname</span>&nbsp;';
                      tag += tag_template.replace(/\%tagtype/g, "ign").replace(/\%tagname/g, "My IGN");
                  }
        
                  var linkid = "chat-line-" + Math.round(Math.random() * 1000000000);
                  var line = line_template;
                  line = line.replace(/\%modbuttons/g, modbuttons);
                  line = line.replace(/\%tag/g, tag);
                  line = line.replace(/\%sender/g, info.sender.replace(/\%/g, '_'));
                  line = line.replace(/\%nickname/g, unescape(info.sender)); 
                  line = line.replace(/\%displayname/g, displayname);
                  line = line.replace(/\%timestamp/g, info.timestamp);
                  line = line.replace(/\%message/g, info.message);
                  line = line.replace(/\%color/g, info.color);
                  line = line.replace(/\%linkid/g, linkid);
              }
    
        with_ich = function(info) {
                var linkid = "chat-line-" + Math.round(Math.random() * 1000000000);
              var is_ign = false;
              var displayname = unescape(info.nickname);
              if (displayname.indexOf("ign-") == 0) {
                  is_ign = true;
                  displayname = displayname.substr("ign-".length);
              }
                  var templateArgs = {
                      id:             linkid,
                      showModButtons: (admin && info.sender != "jtv" && info.sender != PP.login),
                      timestamp:      (this.show_timestamps || !this.history_ended) ? info.timestamp : "",
                      message:        info.message,
                      sender:         info.sender,
                      displayname:    displayname,
                      color:          info.color
                  };
        
                  var tag = "";
                  if(info.tagtype){
                      var tag_template = '<span class="tag %tagtype" title="%tagname">%tagname</span>&nbsp;';
                      tag = tag_template.replace(/\%tagtype/g, info.tagtype).replace(/\%tagname/g, info.tagname);
                  }
                  if(info.turbo){
                      var tag_template = '<span class="tag %tagtype" title="%tagname"><a href="http://twitch.tv/turbo?utm_source=link&utm_campaign=chat_badge" target="_blank">%tagname</a></span> ';
                      tag += tag_template.replace(/\%tagtype/g, "turbo").replace(/\%tagname/g, "Turbo");
                  }
                  if(info.subscriber){
                      var tag_template = '<span class="tag %tagtype %tagchannel" title="%tagname"><a href="/' + this.channel + '/subscribe" target="_blank">%tagname</a></span> ';
                      tag += tag_template.replace(/\%tagtype/g, "subscriber").replace(/\%tagname/g, "Subscriber").replace(/\%tagchannel/g, this.channel);
                  }
                  if(is_ign){
                      var tag_template = '<span class="tag %tagtype" title="%tagname">%tagname</span>&nbsp;';
                      tag += tag_template.replace(/\%tagtype/g, "ign").replace(/\%tagname/g, "My IGN");
                  }
        
                  // TODO: use a good template instead of string replacing for badges
                  var line = ich['chat-line-action'](templateArgs);
                  line = line.replace(/\@tag/g, tag);
        
        
        }
  };
</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
no ich
 
no_ich(message1);
 pending…
with ich
 
with_ich(message1);
 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