template 和 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 开发工具(即时间轴)提供了一张不错的图片,然后被一篇不错的文章证实了 https://thinkster.io/templatecache-tutorial/
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
或 加载的模板会命中它.您可能不会注意到差异,除非您有数百条指令都将内联模板添加到页面中.
问题是,对于每个这样的指令,它的模板将一次又一次地解析为 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.
这篇关于template 和 templateUrl Angularjs 之间的性能差异有多大的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!