JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/alight.last.min.js"></script>
<div class="foo">
    <p>zzzzzzzzzzzzz</p>
    <p>zzzzzzzzzzzzz</p>
    <p>zzzzzzzzzzzzz</p>
    <p>zzzzzzzzzzzzz</p>
</div>
<div al-app="mainCtrl">
    <a href al-click="start()">Start</a> <br/>
    jQuery {{jq}}ms<br/>
    fquery {{fq}}ms
</div>

CSS

/*
тестируется именно $(tag), т.к. в реальных проектах теги будут разные.
*/

JavaScript

var timeit = function(f) { var t = (new Date()).getTime(); for(var i=5000;i--;) f(i); return (new Date()).getTime() - t; }

jqTest = function(base, text) {
    var tags = $(base).children();
    for(var i=0;i<tags.length;i++)
        $(tags[i]).text(text)
};

fqTest = function(base, text) {
    var tags = f$.children(base);
    for(var i=0;i<tags.length;i++)
        f$.text(tags[i], text)
};

alight.controllers.mainCtrl = function(scope){
    scope.start = function() {
        var tag = $('div.foo')[0];        
        scope.jq = timeit(function(n){ jqTest(tag, 'test '+n) });
        scope.fq = timeit(function(n){ fqTest(tag, 'test '+n) });
    }
};