JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/alight.last.min.js"></script>
<div class="foo" style="display: none">
    <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).children(), т.к. в реальных проектах теги будут разные.
*/

JavaScript

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

alight.controllers.mainCtrl = function(scope){
    scope.start = function() {
        var tag = $('div.foo')[0];        
        scope.jq = timeit(function(){ for(var i=500000;i--;) $(tag).children() });
        scope.fq = timeit(function(){ for(var i=500000;i--;) f$.children(tag) });
    }
};