perfomance mixing javascript and jquery : <p>There are lots of discussion about this topic, but I wanna clear my ambiguity or confusion - <strong>my mixed code make sense or not.</strong> </p>

<p>Previously I thought <code>Jquery</code> is most comfortable in every aspects, from easiness to the level of flexibility. There is no doubt we can create the vast and robust client side application with the usage of Jquery.</p>

<p>So I had been using <code>Jquery</code> even in small and simple tasks. But while concerning about performance, I found peoples are recommending pure JavaScript if you can. I read in lot of forums, question/answers about the performance, then I realized I am using Jquery unnecessarily.</p>

<p>For example, I had using to do simple task </p>

<pre><code>var value = $('#div').text();
</code></pre>

<p>instead of </p>

<pre><code>var value = document.getElementById('div').innerHTML;
</code></pre>

<p>In addition, I had used maximum <code>$.each</code> even in simple selection which can be done with <code>document.querySelector</code> or pure javascript <code>for</code> loop  </p>

<p>I can't avoid the usage of Jquery, but can minimize. So, browser have to load jquery. </p>

<p>Now I have minimized jquery usage in external <code>.js</code> file, using pure javascript code for simple task and using jquery for only complex. </p>

<p><em>Now my question is</em> </p>

<p><strong>Now would my perfomance be better and fast than previous my way (where I had used jquery only) ?</strong></p>

<p>OR</p>

<p><strong>if $ is initialized once, does it affect other pure javascript code ?</strong></p>

<p>To be more clear,</p>

<p><strong>Does second one is faster than first one ?</strong></p>

<p><strong>Jquery only</strong></p>

<pre><code>function purchase(){
    $.ajax({
        url:"fetch.php",  
        method:"POST",  
        data:{prch_id:'pty'},
        beforeSend: function() {
            $('.pty').html('Processsing');
        },
        success:function(data){
            $('.pty').html(data);
            auto_select();
        }
    }); 
}
</code></pre>

<p><strong>Javascript with Jquery</strong></p>

<pre><code>function purchase(){
    var http = null;
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }
    else{
        http = new ActiveXObject('Microsoft.XMLHTTP');
    }
    var vars = "prch_id=pty";
    http.open('POST','fetch.php',true);
    http.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    http.onreadystatechange = function(){
        if(http.readyState==4 &amp;&amp; http.status==200){
            var data = http.responseText;
            $('.pty').html(data);
            auto_select();
        }
    }
    http.send(vars);
        $('.pty').html('Processsing');
}
</code></pre>

<p>if we used pure JavaScript only - it is sure it is speedy, but I want to know mixing of jquery and JavaScript improves or does not make any sense.</p>
