Performance template和templateUrl Angularjs之间的性能差异有多大

template和templateUrl之间的性能差异有多大

目前，我在所有指令中都使用模板，但因为我对性能着迷，所以我想现在就使用模板，这样会更快

如果我使用templateUrl+$templateCache，这比在指令中仅使用template快吗？

改天我在你的帖子中问了自己一个问题。由于之前没有其他人回答，我也没有足够的代表发表评论，以下是我在几次测试后的发现

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

只有当您一次加载大量不同的指令，并且所有指令都有小文件作为部分时，templateURL可能会导致较差的用户体验（因此，头的小数据量将产生很大的差异）

---

由于通常差异很小，我个人更喜欢templateURL方法，因为它使代码更干净、更有组织

在这里遇到了类似的问题，chrome开发工具（即时间线）给出了一个很好的图片，然后一篇很好的文章证实了这一点

区别在于

$templateCache

。内联模板不会命中它，而加载了

templateUrl

或

的模板会命中它。除非有几百条指令都将内联模板添加到页面中，否则您可能不会注意到差异。
问题是，对于每一个这样的指令，它的模板都会被一次又一次地解析为DOM，这会导致浪费时间；b） 浪费内存；c） 大量的GC调用

---

如上面文章所述，生产选项使用构建工具将所有模板填充到

$templateCache

。

这是一个JSPerf测试，比较$templateCache中的模板与作为字符串传递模板：

---

在这种情况下，对于一个非常简单的模板，普通的内联

模板

速度更快，可能是因为它没有产生异步

$http

请求的开销。即使该请求只是从

$templateCache

加载值，该服务仍然有开销。

我现在使用的是templateURL。在生产中，我将每个html粘贴到js中，并将它们放入缓存中。我在你链接的文章中没有看到关于将模板重新分类到DOM中的评论。查看Angular 1.5的

applyDirectivesToNode

函数中的实现，它看起来像是用

template

指定的内联模板和模板缓存中的模板最终以相同的方式处理。不同之处在于，即使使用

templateUrl

指定的模板在缓存中，Angular仍会发出异步

$http

请求以获取其内容，这会带来一些开销