eipm-template-use-case

JavaScript performance comparison

Revision 3 of this test case created by test

Info

eipm use case comparison for Different render engines.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://underscorejs.org/underscore-min.js">
</script>
<script src="https://raw.github.com/olado/doT/master/doT.min.js">
</script>
<script src="https://raw.github.com/aui/artTemplate/master/template.min.js">
</script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js">
</script>
<div id="wrapper" style="display:none">
  <div id="homecard">
  </div>
  <div id="appcard">
  </div>
</div>
<script type="text/javascript">
  Eip = {};
  Eip.isAndroid = 1;

  data = {
    "attn": "测试人员",
    "fax": "",
    "faxno": "",
    "fjr": "彭鹏/信息科技公司/gdyd",
    "fwbh": "",
    "lzgc": [{
      "what": "起草",
      "when": "2013-03-05 12:50",
      "who": " 彭鹏"
    }, {
      "what": "部门领导审批",
      "when": "2013-03-05 12:51",
      "who": "彭鹏"
    }, {
      "what": "拟稿人",
      "when": "2013-03-05 12:52",
      "who": "彭鹏"
    }, {
      "what": "部门领导审批",
      "when": "2013-03-11 9:14",
      "who": "陈江曼"
    }, {
      "what": "拟稿人",
      "when": "2013-04-15 16:27",
      "who": "彭鹏"
    }],
    "mainTitle": "传真函件",
    "optBtns": {
      "ok": "&nbsp;完&nbsp;成&nbsp;\t\n         ",
      "sent": "&nbsp;会&nbsp;签&nbsp;"
    },
    "optionselect": ["--请选择审批意见--\n", "同意。\n", "已阅。"],
    "page": "",
    "qfr": "",
    "retcode": 1,
    "spyj": [{
      "what": "这是一条测试待办",
      "when": "(2013年03月05日 12:50)",
      "who": "彭鹏"
    }, {
      "what": "继续测试",
      "when": "(2013年03月05日 12:51)",
      "who": "彭鹏"
    }, {
      "what": "同意。测试提交传真函件",
      "when": "(2013年03月05日 12:52)",
      "who": "彭鹏"
    }, {
      "what": "我这里的待办超过30个了",
      "when": "(2013年03月11日 09:14)",
      "who": "陈江曼"
    }, {
      "what": "同意。",
      "when": "(2013年04月15日 16:27)",
      "who": "彭鹏"
    }],
    "subject": "【移动EIP测试】测试传真函件",
    "tel": "",
    "time": "",
    "to": "测试人员",
    "option_infor": ["粤电科技传真#〔2012〕#a号#b*粤电科技传真〔2012〕4号", "粤电科技传真#〔2011〕#a号#b*粤电科技传真〔2011〕9号", "粤电科技传真#〔2010〕#a号#b*粤电科技传真〔2010〕6号"]
  };

  under_tmpl = '\
        <div class="stdListItem non-pad">\
                <div class="stdListItem-title"><%= subject %></div>\
                <div class="stdListItem-info">\
                        <span class="stdLIstItem-author">发件人:<%= fjr  %></span>\
                </div>\
                <div class="todo-content-body header spyj">\
                        <span class="more hide"></span>\
                        <div class="todo-name">函件内容<div class="folding more"></div></div>\
                        <div class="todo-content">\
                                <span class="todo-who">致:</span>\
                                <span class="todo-what"><%= to %></span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">呈交:</span>\
                                <span class="todo-what"><%= attn %></span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">传真号码:</span>\
                                <span class="todo-what"><%= faxno %></span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">日期:</span>\
                                <span class="todo-what"><%= time %></span>\
                        </div>\
                </div>\
                <div class="dtl-opinions">\
                <% if(typeof spyj !=="undefined" && spyj.length>0) { %>\
                        <div class="todo-content-body spyj">\
                        <div class="todo-name">审批意见<div class="folding more"></div></div>\
                        <% for (var i=0;i<spyj.length;i++) {%>\
                                <div class="todo-content">\
                                        <span class="todo-who"> <%= spyj[i].who %></span>\
                                        <span class="todo-what"><%= spyj[i].what %></span>\
                                        <span class="todo-when"><%= spyj[i].when.replace(/[(())]/g,"") %></span>\
                                        </div>\
                        <% } %>\
                </div>\
                <% } %>\
                <% if(typeof lzgc !=="undefined" && lzgc.length>0) { %>\
                        <div class="todo-content-body lzgc">\
                        <div class="todo-name">流转过程<div class="folding more"></div></div>\
                        <% for (var i=0;i<lzgc.length;i++) { %>\
                                <div class="todo-content">\
                                        <span class="todo-when lz"><%= lzgc[i].when.split(" ")[0] %></span>\
                                        <span class="todo-who lz"><%= lzgc[i].who %></span>\
                                        <span class="todo-what lz"><%= lzgc[i].what.substr(0, 6) %></span>\
                                        <% if (lzgc[i].step) { %>\
                                <span class="todo-when"><%= lzgc[i].step %></span>\
                                <% } %>\
                                </div>\
                        <% } %>\
                </div>\
                <% } %>\
                <% if (typeof atch !== "undefined" && atch.length>0) { %>\
                        <div class="todo-content-body spyj">\
                                <div class="todo-name">正文及附件<div class="folding more"></div></div>\
                                <div class=" doc-point"></div>\
                        </div>\
                <% } %>\
                <div class="todo-content-body nextuser">\
                        <span class="change"></span>\
                        <div class="todo-name">下一环节处理人</div>\
                                <div class="todo-content">\
                                </div>\
                        <div class="todo-right"></div>\
                </div>\
                <% if (typeof optionselect !== "undefined" && optionselect.length>0) { %>\
                        <div class="todo-content-body opinion">\
                                <div class="todo-name">我的意见</div>\
                                <div class="usual-opinion opinion">常用意见\
                                </div>\
                                <% for(var i=1; i<optionselect.length;i++) {%>\
                                        <div class="ui-option opinion " value="<%=optionselect[i]%>"><%=optionselect[i]%></div>\
                                <% } %>\
                                <% for(var opt in optBtns) {%>\
                                        <div class="usual-opinion opt" type="<%=opt%>"><%=optBtns[opt].replace(/&nbsp;/g,"")%>\
                                        </div>\
                                <% } %>\
                                <div class="todo-content">\
                                        <div id="appro-info"></div>\
                                        <div class="todo-content opinion-point">\
                                        </div>\
                                </div>\
                                <div class="todo-right"></div>\
                        </div>\
                        <% if (Eip.isAndroid) { %>\
                                <div class="todo-content android-padding">\
                                </div>\
                        <% } %>\
                <% } else if (typeof optBtns !== "undefined" ) { %>\
                        <div class="spyj todo-content-body opt">\
                                <div class="todo-name">我的操作</div>\
                                <% for(var opt in optBtns) {%>\
                                        <div class="usual-opinion opt" type="<%=opt%>"><%=optBtns[opt].replace("&nbsp;","")%>\
                                                </div>\
                                <% } %>\
                        </div>\
                <% } %>\
                <% if (typeof concurrent !== "undefined" && concurrent.length>0 ) { %>\
                        <div class="concurrent msg">\
                                <div><%= concurrent %>正在办理</div>\
                                <div>您只能阅读,不能办理</div>\
                        </div>\
                <% } %>\
                </div>\
'
;


dot_tmpl= '\
                <div class="stdListItem non-pad">\
                <div class="stdListItem-title">{{= it.subject }}</div>\
                <div class="stdListItem-info">\
                        <span class="stdLIstItem-author">发件人:{{= it.fjr  }}</span>\
                </div>\
                <div class="todo-content-body header spyj">\
                        <span class="more hide"></span>\
                        <div class="todo-name">函件内容<div class="folding more"></div></div>\
                        <div class="todo-content">\
                                <span class="todo-who">致:</span>\
                                <span class="todo-what">{{= it.to }}</span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">呈交:</span>\
                                <span class="todo-what">{{= it.attn }}</span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">传真号码:</span>\
                                <span class="todo-what">{{= it.faxno }}</span>\
                        </div>\
                        <div class="todo-content">\
                                <span class="todo-who">日期:</span>\
                                <span class="todo-what">{{= it.time }}</span>\
                        </div>\
                </div>\
                <div class="dtl-opinions">\
                {{? it.spyj  && it.spyj.length>0 }}\
                        <div class="todo-content-body spyj">\
                        <div class="todo-name">审批意见<div class="folding more"></div></div>\
                        {{~it.spyj :value:index}}\
                                <div class="todo-content">\
                                        <span class="todo-who"> {{= value.who }}</span>\
                                        <span class="todo-what">{{= value.what }}</span>\
                                        <span class="todo-when">{{= value.when.replace(/[(())]/g,"") }}</span>\
                                        </div>\
                        {{~}}\
                        </div>\
                {{?}}\
                {{? it.lzgc  && it.lzgc.length>0 }}\
                        <div class="todo-content-body lzgc">\
                        <div class="todo-name">流转过程<div class="folding more"></div></div>\
                        {{~it.lzgc :value:index}}\
                                <div class="todo-content">\
                                        <span class="todo-when lz">{{= value.when.split(" ")[0] }}</span>\
                                        <span class="todo-who lz">{{=  value.who }}</span>\
                                        <span class="todo-what lz">{{= value.what.substr(0, 6) }}</span>\
                                        {{? (value.step) }}\
                                                <span class="todo-when">{{= value.step }}</span>\
                                        {{?}}\
                                </div>\
                        {{~}}\
                </div>\
                {{?}}\
                {{? it.atch  && it.atch.length>0 }}\
                        <div class="todo-content-body spyj">\
                                <div class="todo-name">正文及附件<div class="folding more"></div></div>\
                                <div class=" doc-point"></div>\
                        </div>\
                {{?}}\
                <div class="todo-content-body nextuser">\
                        <span class="change"></span>\
                        <div class="todo-name">下一环节处理人</div>\
                                <div class="todo-content">\
                                </div>\
                        <div class="todo-right"></div>\
                </div>\
                {{? it.optionselect  && it.optionselect.length>0 }}\
                        <div class="todo-content-body opinion">\
                                <div class="todo-name">我的意见</div>\
                                <div class="usual-opinion opinion">常用意见\
                                </div>\
                                {{~it.optionselect :value:index}}\
                                        <div class="ui-option opinion " value="{{=value}}">{{=value}}</div>\
                                {{~}}\
                                {{ for(var opt in it.optBtns) {}}\
                                        <div class="usual-opinion opt" type="{{=opt}}">{{=it.optBtns[opt].replace(/&nbsp;/g,"")}}\
                                        </div>\
                                {{ } }}\
                                <div class="todo-content">\
                                        <div id="appro-info"></div>\
                        <div class="todo-content opinion-point">\
                                        </div>\
                                </div>\
                                <div class="todo-right"></div>\
                        </div>\
                                <div class="todo-content android-padding">\
                                </div>\
                {{?? it.optBtns }}\
                        <div class="spyj todo-content-body opt">\
                                <div class="todo-name">我的操作</div>\
                                {{ for(var opt in it.optBtns) {}}\
                                        <div class="usual-opinion opt" type="{{=opt}}">{{=it.optBtns[opt].replace("&nbsp;","")}}\
                                                </div>\
                                {{ } }}\
                        </div>\
                {{??}}\
                {{?}}\
                {{? it.concurrent  && it.concurrent.length>0 }}\
                        <div class="concurrent msg">\
                                <div>{{= concurrent }}正在办理</div>\
                                <div>您只能阅读,不能办理</div>\
                        </div>\
                {{?}}\
                </div>\
'
;

</script>
<script id="art" type="text/html">
        <div class="stdListItem non-pad">
                <div class="stdListItem-title"><%= subject %></div>
                <div class="stdListItem-info">
                        <span class="stdLIstItem-author">发件人:<%= fjr  %></span>
                </div>
                <div class="todo-content-body header spyj">
                        <span class="more hide"></span>
                        <div class="todo-name">函件内容<div class="folding more"></div></div>
                        <div class="todo-content">
                                <span class="todo-who">致:</span>
                                <span class="todo-what"><%= to %></span>
                        </div>
                        <div class="todo-content">
                                <span class="todo-who">呈交:</span>
                                <span class="todo-what"><%= attn %></span>
                        </div>
                        <div class="todo-content">
                                <span class="todo-who">传真号码:</span>
                                <span class="todo-what"><%= faxno %></span>
                        </div>
                        <div class="todo-content">
                                <span class="todo-who">日期:</span>
                                <span class="todo-what"><%= time %></span>
                        </div>
                </div>
                <div class="dtl-opinions">
                <% if(typeof spyj !=="undefined" && spyj.length>0) { %>
                        <div class="todo-content-body spyj">
                        <div class="todo-name">审批意见<div class="folding more"></div></div>
                        <% for (var i=0;i<spyj.length;i++) {%>
                                <div class="todo-content">
                                        <span class="todo-who"> <%= spyj[i].who %></span>
                                        <span class="todo-what"><%= spyj[i].what %></span>
                                        <span class="todo-when"><%= spyj[i].when.replace(/[(())]/g,"") %></span>
                                        </div>
                        <% } %>
                </div>
                <% } %>
                <% if(typeof lzgc !=="undefined" && lzgc.length>0) { %>
                        <div class="todo-content-body lzgc">
                        <div class="todo-name">流转过程<div class="folding more"></div></div>
                        <% for (var i=0;i<lzgc.length;i++) { %>
                                <div class="todo-content">
                                        <span class="todo-when lz"><%= lzgc[i].when.split(" ")[0] %></span>
                                        <span class="todo-who lz"><%= lzgc[i].who %></span>
                                        <span class="todo-what lz"><%= lzgc[i].what.substr(0, 6) %></span>
                                        <% if (lzgc[i].step) { %>
                                <span class="todo-when"><%= lzgc[i].step %></span>
                                <% } %>
                                </div>
                        <% } %>
                </div>
                <% } %>
                <% if (typeof atch !== "undefined" && atch.length>0) { %>
                        <div class="todo-content-body spyj">
                                <div class="todo-name">正文及附件<div class="folding more"></div></div>
                                <div class=" doc-point"></div>
                        </div>
                <% } %>
                <div class="todo-content-body nextuser">
                        <span class="change"></span>
                        <div class="todo-name">下一环节处理人</div>
                                <div class="todo-content">
                                </div>
                        <div class="todo-right"></div>
                </div>
                <% if (typeof optionselect !== "undefined" && optionselect.length>0) { %>
                        <div class="todo-content-body opinion">
                                <div class="todo-name">我的意见</div>
                                <div class="usual-opinion opinion">常用意见
                                </div>
                                <% for(var i=1; i<optionselect.length;i++) {%>
                                        <div class="ui-option opinion " value="<%=optionselect[i]%>"><%=optionselect[i]%></div>
                                <% } %>
                                <% for(var opt in optBtns) {%>
                                        <div class="usual-opinion opt" type="<%=opt%>"><%=optBtns[opt].replace(/&nbsp;/g,"")%>
                                        </div>
                                <% } %>
                                <div class="todo-content">
                                        <div id="appro-info"></div>
                                        <div class="todo-content opinion-point">
                                        </div>
                                </div>
                                <div class="todo-right"></div>
                        </div>
                <% } else if (typeof optBtns !== "undefined" ) { %>
                        <div class="spyj todo-content-body opt">
                                <div class="todo-name">我的操作</div>
                                <% for(var opt in optBtns) {%>
                                        <div class="usual-opinion opt" type="<%=opt%>"><%=optBtns[opt].replace("&nbsp;","")%>
                                                </div>
                                <% } %>
                        </div>
                <% } %>
                <% if (typeof concurrent !== "undefined" && concurrent.length>0 ) { %>
                        <div class="concurrent msg">
                                <div><%= concurrent %>正在办理</div>
                                <div>您只能阅读,不能办理</div>
                        </div>
                <% } %>
                </div>
</script>
 
<script>
Benchmark.prototype.setup = function() {
    doTfn = doT.template(dot_tmpl);
};

Benchmark.prototype.teardown = function() {
    $("#appcard").html("")
};
</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
underscore template
var html = _.template(under_tmpl, data);
//$("#appcard").append(html)
pending…
arT
var html = template.render("art", data)
//$("#appcard").append(html)
pending…
doT
var html = doTfn(data);
//$("#appcard").append(html);
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