Menu
How much is there a performance difference between template and templateUrl?
Currently I am using template in all my directives, but because I am obsessed with performance, I would like to now, which is faster.
And if I use templateUrl + $templateCache, is this faster then only using template in directives?
801
There are no such real differences between the template and templateUrl property in a term of performance of an application.
According to Angular, when you have a complex view (i.e. a view with more than 3 lines), then go with templateUrl (use external file); otherwise, use the template (inline HTML) properly of the component decorator.
If you have small lines of code for a component then use template property. If you have complex and many lines of HTML code then it is recommended to use templateUrl. If you use template then you will not get the feature of VS Code like intelligence support, code-completion, and formatting.
You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.
I was asking myself the #1 question of your post another day. As no one else answered it before, and I do not have enough rep to post a comment, here are my findings after a few tests.
The best answer for your first question is that with templateURL you will have the overhead of the lazy request of the partial, when you call the directive (and it happens only at the first time; once loaded, it will behavior pratically the same as with template). The overhead is due to the extra processing of the browser with the extra request and the extra data of the headers.
The templateURL might result in poorer user experience only if you load tons of different directives at once, and all of them have small files as partials (so the small ammount of data of the headers will make a big difference).
As normally the difference is very low, I personally prefer the templateURL approach, as it makes the code cleaner and more organised.
192
Faced kind of similar problem here and chrome dev tools (namely the Timeline) gave a nice picture which was then confirmed by a nice article https://thinkster.io/templatecache-tutorial/
The difference is really in $templateCache. Inline template doesn't hit it, while templates loaded with templateUrl or <script type="test/ng-template"> do. You may not notice the difference until you have few hundreds directives all having inline template being added to the page.
The thing is that for each such directive it's template will be parsed into DOM again and again which results in a) wasted time; b) wasted memory; c) lot of GC calls
As described in the article above the production option is using a build tool to fill in the $templateCache with all of your templates.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
