模板和templateUrl Angularjs之间有多少性能差异 [英] How much of a performance difference is between template and templateUrl Angularjs

问题描述

template和templateUrl之间有多少性能差异?

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.

如果我使用templateUrl + $ templateCache，这样是否更快，然后仅在指令中使用模板?

And if I use templateUrl + $templateCache, is this faster then only using template in directives?

推荐答案

此处遇到类似的问题，而chrome开发工具(即时间轴)给出了一张漂亮的图片，随后被漂亮的文章

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/

差异实际上是在$templateCache中.内联模板没有命中，而使用templateUrl或<script type="test/ng-template">加载的模板却可以.您可能直到几百个指令都已将内联模板添加到页面后才注意到差异.
事实是，对于每个这样的指令，其模板将一次又一次地解析为DOM，这将导致a)浪费时间； b)浪费内存； c)很多GC调用

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

如上面文章中所述，生产选项正在使用构建工具将您所有的模板填充到$templateCache中.

As described in the article above the production option is using a build tool to fill in the $templateCache with all of your templates.

这篇关于模板和templateUrl Angularjs之间有多少性能差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！