5

This is what I know so far:

  • when modifying DOM, Javascript vanilla does that directly and every time so it is computationally expensive
  • I know that React and Vue.js use virtual DOM so they do not update the real DOM if it is unnecessary but what about Angular. How does Angular do that?

In a real world app does it really matter which one is faster?

Improve this question
6
  • Angular has its own change detection that has a similar philosophy to the virtual DOM but functions differently. It avoids making updates or more specifically checking for changes where it's not necessary based on the DOM hierarchy. As for DOM modification with vanilla JavaScript, there's nothing stopping you from doing your own change detection or maintaining your own virtual DOM either on your own or through a framework like github.com/Matt-Esch/virtual-dom ... So it's specious to say that React/VUE are faster than vanilla JS, and virtual dom can be slower in some cases. Commented Aug 20, 2018 at 16:44
  • In a real world app, you should pick a framework based on if it makes you more productive or not. When your choice of framework begins to exhibit performance issues, then you can begin to identify where to optimize for performance. Choosing to not use a framework because it might not be as fast as something else is a fools errand, unless you know from the ground up that the app demands the highest performance possible in every single interaction. And in that case, you probably aren't doing anything client side anyway. Commented Aug 20, 2018 at 16:48
  • 2
    "Javascript vanilla does that directly and every time" - of course not, you wouldn't write dumb code. Whatever framework you use, it'll have some overhead, which may be small but cannot be negative. Commented Aug 20, 2018 at 16:51
  • Is it better to load a library file to manipulate DOM or is it better to use pure JavaScript to manipulate DOM? Commented Aug 20, 2018 at 16:58
  • great thoughts so far. I agree with you all :) Commented Aug 20, 2018 at 17:03

1 Answer 1

Reset to default
3

How does Angular do that?

As already mentioned, Angular has its own change detection strategy. Long story short, it patches some specific objects (like browser events, xmlHttpRequest, timeout and so on) to know when to start checking and checks values that matter

So this kinda mix with events and dirty checking. If you want some comparison - try to check this article

In a real world app does it really matter which one is faster?

In a real world all depends on requirements and situation. You should start from the question -what do I want to achive? If you want flexibility - take React. If you want more stable structure and guidelines - take Angular. If you want compromise - take Vue. If you need to save client traffic - try Hyperapp or smth like that.

And to be honest, Angular, React and Vue are fast enough for most of applications so you shouldn't worry about that from start.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

And to top it off, Angular team is still working harder to make the applications more faster and faster,
@Arun Angular ivy will be released later this year, promising a huge reduction in build size and probably faster rendering too.
yeap, I also heard that Angular is getting a lot better and faster with every release
@MatthiasL Does that mean it has been pretty bad in the past? :-P

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.