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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.