yiguanjia
/
php


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
							<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>template test</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/highcharts.js"></script>


<script src="../src/template.js"></script>
<script src="js/tmpl.js"></script>
<script src="js/doT.js"></script>
<script src="js/juicer.js"></script>
<script src="js/kissy.js"></script>
<script src="js/template.js"></script>
<script src="js/mustache.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/baiduTemplate.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script src="js/easytemplate.js"></script>
<script src="js/underscore.js"></script>


<script>
// 数据量
var length = 100;
// 渲染次数
var number = 10000;

var data = {
    list: []
};

for (var i = 0; i < length; i ++) {
    data.list.push({
        index: i,
        user: '<strong style="color:red">糖饼</strong>',
        site: 'http://www.planeart.cn',
        weibo: 'http://weibo.com/planeart',
        QQweibo: 'http://t.qq.com/tangbin'  
    }); 
};


// 待测试的引擎列表
var testList = [

    {
        name: 'artTemplate',
        tester: function () {
            template.isEscape = false;
            var source = document.getElementById('template').innerHTML;
            var fn = template.compile(source);
            for (var i = 0; i < number; i ++) {
                fn(data);
            }
        }
    },
    
    {
        name: 'juicer',
        tester: function () {
            var config = {cache:true};

            var source = document.getElementById('juicer').innerHTML;
            for (var i = 0; i < number; i ++) {
                juicer.to_html(source, data, config);
            }
        }
    },
    
    {
        name: 'doT',
        tester: function () {
            var source = document.getElementById('doT').innerHTML;
            var doTtmpl = doT.template(source);
            for (var i = 0; i < number; i ++) {
                doTtmpl(data);
            }
        }
    },
    
    {
        name: 'Handlebars',
        tester: function () {
            var source = document.getElementById('Handlebars').innerHTML;
            var fn = Handlebars.compile(source);
            for (var i = 0; i < number; i ++) {
                fn(data);
            }
        }
    },
    
    {
        name: 'tmpl',
        tester: function () {
            var source = document.getElementById('tmpl').innerHTML;
            var fn = tmpl(source);
            for (var i = 0; i < number; i ++) {
                fn(data);
            }
        }
    },
    
    {
        name: 'easyTemplate',
        tester: function () {
            var source = document.getElementById('easyTemplate').innerHTML;
            var fn = easyTemplate(source);
            for (var i = 0; i < number; i ++) {
                // easyTemplate 渲染方法被重写到 toString(), 需要取值操作才会运行
                fn(data) + '';
            }
        }
    },

    {
        name: 'underscoreTemplate',
        tester: function () {
            var source = document.getElementById('underscoreTemplate').innerHTML;
            var fn = _.template(source);
            for (var i = 0; i < number; i ++) {
                fn(data);
            }
        }
    },
    
    {
        name: 'baiduTemplate',
        tester: function () {
            var bt=baidu.template;
            bt.ESCAPE = false;
            for (var i = 0; i < number; i ++) {
                bt('baidu-template', data);
            }
        }
    },
    
     // jqueryTmpl 太慢，可能导致浏览器停止响应
    /*{
        name: 'jqueryTmpl',
        tester: function () {
            var source = document.getElementById("jqueryTmpl").innerHTML;
            for (var i = 0; i < number; i ++) {
                $.tmpl(source, data);
            }
        }
    },*/
    
    {
        name: 'Mustache',
        tester: function () {
            var source = document.getElementById('Mustache').innerHTML;
            for (var i = 0; i < number; i ++) {
                Mustache.to_html(source, data);
            }
        }
    }
    
];

KISSY.use('template',function(S,T) {
    testList.push({
        name: 'kissyTemplate',
        tester: function () {
            var source= document.getElementById('kissy').innerHTML;

            for (var i = 0; i < number; i ++) {
                T(source).render(data);
            }
        }
    });
});


var startTest = function () {

    var Timer = function (){
        this.startTime = + new Date;
    };

    Timer.prototype.stop = function(){
        return + new Date - this.startTime;
    };
    
    var colors = Highcharts.getOptions().colors;
    var categories = [];

    for (var i = 0; i < testList.length; i ++) {
        categories.push(testList[i].name);
    }

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            height: categories.length * 40,
            type: 'bar'
        },

        title: {
            text: 'JavaScript 模板引擎负荷测试'
        },

        subtitle: {
            text: length + ' 条数据 × ' + number + ' 次渲染'
        },
                
        xAxis: {
            categories: categories,
            labels: {
                align: 'right',
                style: {
                    fontSize: '12px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },

        yAxis: {
            min: 0,
            title: {
                text: '耗时(毫秒)'
            }
        },

        legend: {
            enabled: false
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.y + '毫秒';
            }

        },

        credits: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + 'ms';
                    }
                }
            }
        },
        series: [{
            data : []
        }]

    });
    
    var log = function (message) {
        document.getElementById('log').innerHTML = message;
    };
    
    var tester = function (target) {
    
        
        var time = new Timer;
        target.tester();
        var endTime = time.stop();
        
        chart.series[0].addPoint({
            color: colors.shift(),
            y: endTime
        });
        
        
        if (!testList.length) {
            log('测试已完成，请不要迷恋速度');
            return;
        }

        target = testList.shift();
        
        log('正在测试: ' + target.name + '..');
        
        setTimeout(function () {
            tester(target);
        }, 500);
        
    };
    
    var target = testList.shift();
    log('正在测试: ' + target.name + '..');
    tester(target);

};
</script>


<!-- artTemplate 的模板 -->
<script id="template" type="text/tmpl">
<ul>
    <% for (i = 0, l = list.length; i < l; i ++) { %>
        <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
    <% } %>
</ul>
</script>

<!-- baidu-template 的模板 -->
<script id="baidu-template" type="text/tmpl">
<ul>
    <% for (var val, i = 0, l = list.length; i < l; i ++) { %>
        <% val = list[i]; %>
        <li><%:=val.index%>. 用户: <%:=val.user%>/ 网站：<%:=val.site%></li>
    <% } %>
</ul>
</script>

<!-- easyTemplate 的模板 -->
<script id="easyTemplate" type="text/tmpl">
<ul>
    <#list data.list as item>
        <li>${item.index}. 用户: ${item.user}/ 网站：${item.site}</li>
    </#list>
</ul>
</script>

<!-- tmpl 的模板 -->
<script id="tmpl" type="text/tmpl">
<ul>
    <% for (var val, i = 0, l = list.length; i < l; i ++) { %>
        <% val = list[i]; %>
        <li><%=val.index%>. 用户: <%=val.user%>/ 网站：<%=val.site%></li>
    <% } %>
</ul>
</script>

<!-- jqueryTmpl 的模板 -->
<script id="jqueryTmpl" type="text/tmpl">
<ul>
    {{each list}}
        <li>${$value.index}. 用户: ${$value.user}/ 网站：${$value.site}</li>
    {{/each}}
</ul>
</script>

<!--juicer 的模板 -->
<script id="juicer" type="text/tmpl">
<ul>
    {@each list as val}
        <li>$${val.index}. 用户: $${val.user}/ 网站：$${val.site}</li>
    {@/each}
</ul>
</script>

<!-- doT 的模板 -->
<script id="doT" type="text/tmpl">
<ul>
    {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
        {{ val = it.list; }}
        <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
    {{ } }}
</ul>
</script>

<!--Mustache 的模板 -->
<script id="Mustache" type="text/tmpl">
<ul>
    {{#list}}
        <li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
    {{/list}}
</ul>
</script>

<!--Handlebars  的模板 -->
<script id="Handlebars" type="text/tmpl">
<ul>
    {{#list}}
        <li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
    {{/list}}
</ul>
</script>

<!--kissy 的模板 -->
<script id="kissy" type="text/tmpl">
<ul>
    {{#each list as val}}
        <li>{{val.index}}. 用户: {{val.user}}/ 网站：{{val.site}}</li>
    {{/each}}
</ul>
</script>


<!-- ejs 的模板 -->
<script id="ejs" type="text/tmpl">
<ul>
  <& for (var val, i = 0, l = @list.length; i < l; i ++) { &>
        <& val = @list[i]; &>
        <li> <&= val.index &>. 用户: <&= val.user &>； 网站：<&= val.site &></li> 
  <& } &>
</ul>
</script>

<!-- underscore 的模板 -->
<script id="underscoreTemplate" type="text/tmpl">
<ul>
    <% for (var i = 0, l = list.length; i < l; i ++) { %>
        <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
    <% } %>
</ul>
</script>
</head>

<body>
<h1>引擎渲染速度竞赛</h1>
<p><strong><script>document.write(length)</script></strong> 条数据 × <strong><script>document.write(number)</script></strong> 次渲染测试 [isEscape:false, isCache:true]</p>
<p><em>建议在拥有 v8 javascript 引擎的 chrome 浏览器上进行测试，避免浏览器停止响应</em></p>
<p><button id="button-test" onclick="this.disabled=true;startTest()" style="padding: 5px;">开始测试&raquo;</button> <span id="log" style="font-size:12px"><script>for (var i = 0; i < testList.length; i ++) {document.write(testList[i].name + '; ')}</script></span></p>
<div id="container" style="min-width: 400px; margin: 0 auto"></div>
</body>
</html>