gpt4 book ai didi

performance - ng-include、ng-template 或指令 : which one is better for performance

转载 作者:行者123 更新时间:2023-12-03 21:16:55 25 4
gpt4 key购买 nike

我想知道设计关于性能的 Angular 应用程序的最佳方法,用于构建带有可重用小部件(如页眉、侧边栏、页脚等)的 HTML 模板。基本上主要内容是中央 DIV,其内容将在不同路线之间变化,页眉和页脚几乎总是相同的,侧边栏在某些页面上可能会有所不同。

--- index.html

<body ng-cloak>
<div data-ng-include data-src="'partials/template/header.html'"></div>
<div data-ng-include data-src="'partials/template/sidebar.html'"></div>

<div ng-view></div>

<div data-ng-include data-src="'partials/template/footer.html'"></div>
</body>

-- header.html
<div id="header">
// ... HTML CONTENT
</div>

在 $templateCache 中有 header.html 会更好吗?例如:

-- header.html
<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
<div id="header">
// ... HTML CONTENT
</div>
</scipt>

或者甚至我应该为每个小部件使用指令,例如: <appHeader></appHeader> ……?

为了在每个屏幕上嵌入这些小部件,哪一个在性能、凝聚力、可重用性和可扩展性方面更好?

最佳答案

您的选择目前不需要由性能决定。

首先,如果你把你的部分放在服务器上或在 ng-template 中并使用 ng-include 包含它们结果是一样的,并且都缓存在 $templateCache 中。因此,即使从服务器加载部分内容可能看起来更慢,这也将完成一次。我建议如果你有合适的尺寸部分不要使用 ng-template并从服务器加载它。

根据您的页面结构,至少对于您不需要使用指令的页眉和页脚,这些控件只有单一呈现。标准ng-include使用部分或链接的 Controller 就可以了。记住 ng-include本身就是一个指令,所以没有必要比较它们的性能。

当您想要一个需要跨页面使用的组件时,指令将很有用,您的页眉和页脚导航不符合此要求,因为页面上只有这些元素的单个实例。

希望能帮助到你。

关于performance - ng-include、ng-template 或指令 : which one is better for performance,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22108719/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com