eipm-template-use-case

JavaScript performance comparison

Revision 2 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>\
'
;
</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(under_tmpl, 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