JSFiddle - React, Tailwind, and code Playground

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 type="text/x-jquery-tmpl" id="microsoft_template">
        <span>${value}</span>
</script>
<script type="text/x-jquery-tmpl" id="microsoft_template2">
    {{each elements}}<span>${value}</span>{{/each}}
</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">
    <tr>
        <th>Microsoft templates</th>
        <th>Microsoft templates 2</th>
        <th>PureJSTemplate</th>
        <th>Кривые руки</th>
        <th>Выпрямленные</th>
    </tr>
</table>

CSS

#panel
{
    margin-top: 5px;
    margin-bottom: 5px;
}
#resulttable
{
    background-color: #000;
    border-spacing:1px;
    border-collapse:collapse;
}
#resulttable th
{
    font-weight: bold;
    padding: 5px;
    background-color: #000;
    color: #fff;
}
#resulttable td
{
    padding: 5px;
    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());
    var interval = setInterval(function() {
        var timers = [];
        $("#out").html("");
        timer.start();
        $("#microsoft_template").tmpl(elements).appendTo($("#out"))
        timers.push(timer.end());
        
        $("#out").html("");
        timer.start();
        $("#microsoft_template2").tmpl({ elements: elements }).appendTo($("#out"));
        timers.push(timer.end());

        $("#out").html("");
        timer.start();
        $("#out").pureJSTemplate({
            id: "purejstemplate_template",
            data: elements
        });
        timers.push(timer.end());

        $("#out").html("");
        timer.start();
        for (var i = 0; i < elements.length; i++) {
            $("<span/>").text(elements[i].value).appendTo($("#out"));
        }
        timers.push(timer.end());

        $("#out").html("");
        timer.start();
        var spans = [];
        for (var i = 0; i < elements.length; i++) {
            spans.push("<span>" + elements[i].value + "</span>");
        }
        $("#out").html(spans.join(""));
        timers.push(timer.end());

        $row = $("<tr/>").pureJSTemplate({
            id: "rowtemplate",
            data: timers
        }).appendTo($("#resulttable"));
        count--;
        if (count <= 0) clearInterval(interval);
    }, 500);
});