6

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?

puppeteer701
  • 1,225
  • 3
  • 17
  • 33

3 Answers3

2

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.

sahb
  • 56
  • 7
  • I am using templateURL now. in production, I paste every html to js and put them into cache. https://github.com/karlgoldstein/grunt-html2js – puppeteer701 Aug 26 '14 at 08:31
2

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.

scorpp
  • 635
  • 10
  • 16
  • 1
    I don't see the comments in the article you linked to regarding reparsing templates into the DOM. Looking at the implementation in the `applyDirectivesToNode` function for Angular 1.5, it looks like inline templates specified with `template` and templates in the template cache are ultimately processed the same way. The difference is that even if a template specified with `templateUrl` is in the cache, Angular will still make an async `$http` request to get its content, which has some overhead – Robert Knight Mar 22 '16 at 09:02
1

This is a JSPerf test comparing templates in a $templateCache vs. passing the template as a string: https://jsperf.com/angular-directive-template-vs-templateurl

In this case, with a very simple template, a plain inline template is faster, presumably because it doesn't have the overhead of making an async $http request. Even though that request just loads the value from $templateCache, the service still has overhead.

Robert Knight
  • 2,888
  • 27
  • 21