CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Alan2
Alan2

Reputation: 24602

Is there much overhead if I use directives compared to in-line HTML?

I have twelve web pages and each has a set of 7-10 buttons. The code behind and around the buttons is 6-7 lines of HTML.

To simplify coding I made these into directives with a simple inline template in each directive.

Is there much overhead when a page opens and it has to convert all my elements to directives?

Also what is the process flow for doing this? Will it slow down the rendering of the page?

How about what I am doing, is it a good practice for directives or is there a better way I could do it?

Upvotes: 13

Views: 1116

Answers (4)

Dave Alperovich
Dave Alperovich

Reputation: 32500

1) Yes, there is overhead: Directives are rendered into Markup during Angular's Digest Cycle. The first cycle will run once the framework has loaded. The overhead on loading can be big. The first digest cycle will run quickly.

The answer as to how much overhead depends on whether you intend to use AngularJS on any page already. If the libararies and framework will be loaded anyway, the overhead is minimal. Loading the libs and starting the framework will usually give a slightly noticeably pause before the page fully renders.

If, on the other hand, your page already uses the AngularJS framework, the overhead for an HTML Directive with no model properties is tiny. Heavy overhead happens when you have many bound model properties. Then the framework has to watch your model properties and run through the digest cycle every-time one changes

2) Is it a good idea? YES. NO. Kind of. It depends. Are you already using AngularJS for the page (recurring theme)? If yes, then this is very good practice. You can have many levels of encapsulation with low level cost and are encouraged to do so liberally.

If you are already using Angular and "enduring" the digest cycle, then encapsulating some re-useable HTML, comes with low cost. On the first round of the Digest Cycle, the framework replaces directives with rendered markup. There is a slight cost (minimal), but all code re-use has cost. In this case, it will be minimal.

3) If you want to re-use this code on 1 or several pages that do NOT use AngularJS: In this case, the costs are probably not worth it. Here again, it depends. Maybe if 10 pages use Angular and 2 more do not, you may still prefer to use an AngularJS Directive.

But if none of your pages need the framework, or most (10 out of 12) don't, you are probably better off using an HTML5 template

Upvotes: 7

I_Debug_Everything
I_Debug_Everything

Reputation: 3816

I tried a sample demo and yeah it does take a little bit more time when rendering elements using directives (which is obvious because angular process will consume some time to render custom markups into valid html)

Here is a demo using angular to render elements using directives:

Rendering elements using angular

and here is another one that uses pure html

Rendering elements without angular

I've rendered equal number of elements for both the examples to make sure we have an equal comparison. You can see the time consumed on the console. On an average, considering both the examples rendering elements is 5-10 ms faster while rendering without angular.

Notice that I've defined the app module in both of the examples to maintain the time required to load the angular modules. I usually use directives only when the html is too long or as in your case it's being repeated often. If the time performance is too critical for you and you really want the elements to load faster, I would suggest using pure html.

Update 1
The above example only have simple markups and nothing fancy going on. In real word scenario where we might be passing custom attributes and compiling the elements (using $compile) the time difference may go up even higher.

Update 2

I came across this awesome description of directives, which shows how a directive is injected, compiled and execute on a web page. I think this covers and probably the best resource on how the directive works in Angular.

Upvotes: 4

Beyers
Beyers

Reputation: 9108

As @I_Debug_Everything answer shows, for basic html templates there is a slight penalty. Will 5-10ms make a noticeable difference in performance, I think not.

However, there are other factors you need to take into consideration as well, which might or might not play a role in your setup.

  • With directives you are sharing the directive template, so the amount of data received from the server is less than standard HTML where the HTML will be duplicated on every page and section on the page you want to display the set of common elements.
  • With directives you have a single template to make any changes to your template, so you win in productivity.
  • You can unit test you directives.
  • Arguably directives makes your HTML more readable.
  • Web Components is where the standards are moving to. Angular 2.X supposedly will support this natively.

These are all factors that you also need to take into consideration.

Upvotes: 4

ABOS
ABOS

Reputation: 3821

IMHO, rendering several widgets with 6-7 lines of generic html should not harm your performance too much. If the html has nested directive etc, that would be another story

Upvotes: 5

Related Questions