模板和templateUrl Angularjs之间的性能差异有多大答案

【问题标题】：How much of a performance difference is between template and templateUrl Angularjs模板和templateUrl Angularjs之间的性能差异有多大
【发布时间】：2016-03-22 17:12:51
【问题描述】：

template 和 templateUrl 的性能差异有多大？

目前我在所有指令中都使用模板，但是因为我对性能很着迷，所以我现在想要更快。

如果我使用 templateUrl + $templateCache，这会比只在指令中使用模板更快吗？

【问题讨论】：

As usual

标签： performance angularjs angularjs-directive

【解决方案1】：

我在另一天问自己你帖子的第 1 个问题。由于之前没有其他人回答过，而且我没有足够的代表发表评论，这是我经过几次测试后的发现。

第一个问题的最佳答案是，当您调用指令时，使用 templateURL 您将承担部分延迟请求的开销（并且仅在第一次发生；一次加载后，它的行为实际上与 template 相同）。开销是由于浏览器对额外请求和标头的额外数据进行了额外处理。

templateURL 可能只会在您一次加载大量不同的指令时导致较差的用户体验，并且所有指令都有小文件作为部分（因此标题的少量数据会使差别很大）。

由于通常差异很小，我个人更喜欢 templateURL 方法，因为它使代码更清晰，更有条理。

【讨论】：

我现在正在使用 templateURL。在生产中，我将每个 html 粘贴到 js 并将它们放入缓存中。 github.com/karlgoldstein/grunt-html2js

【解决方案2】：

在这里遇到了类似的问题，chrome 开发工具（即时间轴）给出了一张漂亮的图片，然后由一篇漂亮的文章 https://thinkster.io/templatecache-tutorial/ 证实了这一点

真正的区别在于$templateCache。内联模板不会成功，而使用 templateUrl 或 <script type="test/ng-template"> 加载的模板可以。直到您有数百个指令都将内联模板添加到页面中时，您可能不会注意到差异。
问题是，对于每个这样的指令，它的模板都会一次又一次地解析成 DOM，这会导致 a) 浪费时间； b) 浪费的内存； c) 大量的 GC 调用

如上面文章中所述，生产选项是使用构建工具在$templateCache 中填写您的所有模板。

【讨论】：

我没有看到您链接到的关于将模板重新解析为 DOM 的文章中的 cmets。查看 Angular 1.5 的 applyDirectivesToNode 函数中的实现，看起来就像用 template 指定的内联模板和模板缓存中的模板最终以相同的方式处理。不同的是，即使使用templateUrl 指定的模板在缓存中，Angular 仍然会发出异步$http 请求来获取其内容，这有一些开销

【解决方案3】：

这是一个 JSPerf 测试，比较 $templateCache 中的模板与将模板作为字符串传递：https://jsperf.com/angular-directive-template-vs-templateurl

在这种情况下，使用非常简单的模板，纯内联 template 更快，大概是因为它没有发出异步 $http 请求的开销。即使该请求只是从$templateCache 加载值，服务仍然有开销。

【讨论】：