模板和templateUrl Angularjs之间有多少性能差异

Question

模板和templateUrl之间有多少性能差异？

目前我在所有指令中都使用模板，但由于我对性能很着迷，我现在想，这更快。

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

Answer 1

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

第一个问题的最佳答案是，使用 templateURL ，当您调用指令时，您将获得部分延迟请求的开销（并且它仅在第一次发生;一次加载时，它的行为与模板相同。开销是由于额外的请求和标题的额外数据对浏览器的额外处理。

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

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

Answer 2

这里遇到类似的问题，Chrome开发工具（即时间轴）给出了一个很好的图片，然后由一篇好文章https://thinkster.io/templatecache-tutorial/确认

区别在于<form name="form" ng-app> <div class="col-md-4" ng-class="{ 'has-error' : form.email.$invalid && !form.email.$pristine }"> <label class="col-md-2 control-label">email:</label> <input type="email" name="email" class="form-control" ng-model="rma.Addressid.email" placeholder="email" required> <p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email.</p> </div> <hr/> <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button> 。在使用$templateCache或templateUrl加载的模板时，内联模板无法点击它。在您有几百条指令都将内联模板添加到页面之前，您可能不会注意到差异 问题在于，对于每个这样的指令，它的模板将被反复解析为DOM，这导致a）浪费时间; b）浪费记忆; c）很多GC电话

如上文所述，制作选项使用构建工具在<script type="test/ng-template">中填写所有模板。

Answer 3

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

在这种情况下，使用非常简单的模板，简单的内联pdfinfo test.pdf Creator: DocType PDF-Emitter (DocType PDF-Emitter v1.9.37-9-g1b2b6f3) Producer: Haru Free PDF Library 2.3.0RC2 CreationDate: Mon Jun 4 11:18:30 2018 Tagged: no UserProperties: no Suspects: no Form: none JavaScript: no Pages: 1 Encrypted: no Page size: 595.44 x 841.68 pts Page rot: 90 File size: 149246 bytes Optimized: no PDF version: 1.3更快，可能是因为它没有产生异步template请求的开销。即使该请求只是从$http加载值，该服务仍然有开销。