locked
Performance Issue - jQuery Vs Angular RRS feed

  • Question

  • User-698989805 posted

    Hello friends! I am trying to learn Angular for the last few days and have some basics on it. Though I was wondering about the performance issue like if Angular is faster rather than jQuery. Clarify me if I am mistaken in the assumption. Let's look into the following code samples:

    jQuery:

    $("#btnOpen").click(function(){
        $("p").hide();
    });

    Angular:

     <button ng-click = "myFunc()">Open</button>

    What I understood, when working with jQuery, we use selector to get the DOM element. So using the selector, we query the DOM element to get the control of the HTML element (Say for the button $("#btnOpen")). On the other hand, we practice model-based or OOP approach for Angular without using any selector. In a sense, we assign the model or events directly in the HTML elements (Say ng-click = "myFunc()" or ng-model = "Property"). So what I would like to confirm if we don't use selector to query the elements and bind the events or models in the elements directly, does it matter in the performance issue of an app or the DOM manipulation is still maintained the way jQuery does.

    Monday, February 11, 2019 5:30 PM

All replies

  • User475983607 posted

    First, you are comparing a full blown SPA framework to an API for querying the DOM.  IMHO, Angular far out performs jQuery as jQuery does not come close to the features found in Angular.

    If you are asking if you should add jQuery to an Angular app then the answer is NO you should not add jQuery to Angular.   If you are building an SPA then use Angular over jQuery.  If you are not building an SPA but need to select DOM items then go with jQuery.

    Monday, February 11, 2019 5:44 PM
  • User1520731567 posted

    Hi TechView,

    Angular and jQuery can't reasonably be compared.Angular is a framework, jQuery is a library.

    Frameworks have their place and libraries have their place. However, there is no question that a good framework has more power in writing an application than a library.

    More details,you could refer to this link:

    https://stackoverflow.com/a/20362291

    Best Regards.

    Yuki Tao

    Tuesday, February 12, 2019 9:49 AM
  • User-474980206 posted

    if you included angular just to do on on click method, than angular is heaver download (566k+ for angular, 83k jQuery) . actually to hook the event, angular startup code need to parse the document and hookup the events. both add the own dispatcher, so the click does not call the function directly.

    the jQuery hookup is really quick, and only done once, so its probably faster. though with jQuery you could:

    <button onclick = "myFunc()">Open</button>
    
    <script>
       function myFunc() {
          $("p").hide();
       } 
    </script>
    
    // or
    
    <button onclick = "$('p').hide();">Open</button>
    

    and have no hookup time or extra dispatch. 

    Thursday, February 14, 2019 3:55 PM