perfomance mixing javascript and jquery

Question

There are lots of discussion about this topic, but I wanna clear my ambiguity or confusion - my mixed code make sense or not.

Previously I thought Jquery 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.

So I had been using Jquery 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.

For example, I had using to do simple task

var value = $('#div').text();

instead of

var value = document.getElementById('div').innerHTML;

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

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

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

Now my question is

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

OR

if $ is initialized once, does it affect other pure javascript code ?

To be more clear,

Does second one is faster than first one ?

Jquery only

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();
        }
    }); 
}

Javascript with Jquery

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 && http.status==200){
            var data = http.responseText;
            $('.pty').html(data);
            auto_select();
        }
    }
    http.send(vars);
        $('.pty').html('Processsing');
}

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.

Are you using JavaScript/Jquery with any other Frameworks/Libraries (such as React Or Angular)? — wentjun, Apr 05 '19 at 08:56
If you aren't, then it is fine to use Jquery, as it will help to make things easier, and the overhead for Jquery itself isn't that bad since you aren't using anymore libraries. — wentjun, Apr 05 '19 at 08:58
However, I would not recommend you to use Jquery with frameworks, React or Angular or Vue. — wentjun, Apr 05 '19 at 08:59
I'd start with benchmarking the present performance, browser's dev tools will do. Does the site have an actual problem? Are there operations where scripting takes significant - to the user - amount of time, and will switching to native JavaScript shorten it noticeably? It might turn out that you're trying to solve a problem you don't have. — mbojko, Apr 05 '19 at 09:00
@wentjun, I want to know if once `jquery` is loaded and used, then the usage of native javascript make sense or it doesn't matter ? — Hemant, Apr 05 '19 at 09:04

score 1 · Accepted Answer · answered Apr 05 '19 at 08:58

1

it doesn't matter in your case since jquery is already loaded, and also jquery functions are just calling the said pure javascript functions behind the scenes, so by a very minute difference, pure javascript is faster, but if you are going to build a robust front end stuff, i suggest moving on to MVVM framework such as reactjs

answered Apr 05 '19 at 08:58

Lelouch

910
6
19

you mean if once jquery is loaded, then it is useless or no difference to use native javascript and jquery, don't you ? – Hemant Apr 05 '19 at 09:11
i mean pure javascript would still be faster by a very little difference since jquery calls the same api behind the scenes – Lelouch Apr 05 '19 at 10:43

perfomance mixing javascript and jquery

1 Answers1