JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

JavaScript

// prep code
var myText = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
var testCount = 500;
$.template('myTemplate', '<div><p>${text}</p></div>');
var myTemplate2 = $('<div><p></p></div>');

// output
var output1 = $('#output1');
var output2 = $('#output2');
var output3 = $('#output3');
 
// test 1

console.time('test1');
for(var i = 0; i < testCount; i++){
    myTemplate2.clone()
        .find('p').text(myText).end().appendTo(output1);
}
console.timeEnd('test1');
   
// test 2

console.time('test2');
for(var j = 0; j < testCount; j++){
    $.tmpl('myTemplate', {
        text : myText
    }).appendTo(output2);
}
console.timeEnd('test2');

// test 3

console.time('test3');
var strOutput = '';
for(var k = 0; k < testCount; k++){
    strOutput += '<div><p>' + myText + '</p></div>';
}
output3.append(strOutput);
console.timeEnd('test3');