JSFiddle - React, Tailwind, and code Playground

by lomatek

HTML

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://www.glicky.com/downloads/purejstemplate_jquery.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://github.com/olado/doT/raw/master/doT.js"></script>
<script src="https://raw.github.com/gist/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script>
<script type="text/x-jquery-tmpl" id="microsoft_template">
        <span>${value}</span>
</script>
<script type="text/x-jquery-tmpl" id="underscore">
        <span><%= value%></span>
</script>
<script type="text/x-jquery-tmpl" id="tmpl3">
        <span><%= data.value%></span>
</script>
<script type="text/x-jquery-tmpl" id="underscore2">
       <% for(var i=0; i<data.length; i++) { %><span><%=data[i].value%></span><% }%>
</script>
<textarea cols="10" rows="10" id="purejstemplate_template" style="display: none">
        <# for(var i=0; i<data.length; i++) { #><span><#=data[i].value#></span><# }#>
    </textarea>
<textarea cols="10" rows="10" id="rowtemplate" style="display: none">
        <# for(var i=0; i<data.length; i++) { #><td><#=data[i]#></td><# }#>
    </textarea>
<div id="out" style="display: none">
</div>
<div id="panel">
    Итераций:
    <input type="input" value="5" id="runcount" size="3" />
    <input type="button" value="Запусить" id="runbutton" />
</div>
<table id="resulttable" cellpadding="5" cellspacing="1">
    <thead>
        <tr>
            <th>
                PureJSTemplate
            </th>
            <th>
                UnderScore 1
            </th>
            <th>
                UnderScore
            </th>
            <th>
                doT
            </th>
            <th>
                tmpl3
            </th>
        </tr>
    </thead>
</table>

CSS

#panel
{
    margin-top: 5px;
    margin-bottom: 5px;
}
#resulttable
{
    border: 0 solid #000;
    background-color: #000;
}
#resulttable th
{
    background-color: #000;
    color: #fff;
    padding: 10px
}
#resulttable td
{
    background-color: #fff;
    border: solid 0px #000;
}

JavaScript

//Подготовили площадку
var elements = [];
for (var i = 0; i < 1000; i++) elements.push({ value: i });

// таймер для тестирования
var timer = new (function() {
    this.starttime = 0;
    this.start = function() {
        this.starttime = new Date().getTime();
    }
    this.end = function() {
        return ((new Date()).getTime() - this.starttime) + "ms";
    }
})();

$("#runbutton").click(function() {
    var count = parseInt($("#runcount").val());
    $("tbody table#resulttable").empty();
    var interval = setInterval(function() {
        var timers = [];
        /*// PURE 1
        $("#out").html("");
        timer.start();
        var tmp = _.template($('#underscore').html()), w = $('<div>');
        for (var i = 0; i < elements.length; i++) {
            $("#out").pureJSTemplate({
            id: "purejstemplate_template",
            data: elements
        });
        }
        timers.push(timer.end());*/
    
        // PURE 2
        $("#out").html("");
        timer.start();
        $("#out").pureJSTemplate({
            id: "purejstemplate_template",
            data: elements
        });
        timers.push(timer.end());

        // UNDERSCRORE 1
        timer.start();
        //var tmp = _.template($('#underscore').html()), w = '';
        tmp = _.template($('#underscore').html());
        w = $('<div>');
        for (var i = 0; i < elements.length; i++) {
            $(w).append(tmp(elements[i]));
        }
        $("#out").append(w)
        timers.push(timer.end());
        
        
        // UNDERSCORE 2
        timer.start();
        var tmp = $('#underscore2').html();
        $("#out").append(_.template(tmp, {data: elements}));
        timers.push(timer.end());
        
        // DOT TEMPLATE
        timer.start();
        tmp = doT.template('<span>{{= it.value}}</span>');
        w = $('<div>');
        for (var i = 0; i < elements.length; i++) {
            $(w).append(tmp(elements[i]));
            //w += tmp(elements[i]);
        }
   ...