Question

我想知道设计角度应用程序有关性能的最佳方法，用于构建带有可重复使用的小部件（如标题，侧边栏，页脚等）的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> ...？

为了在每个屏幕上嵌入这些小部件，哪一个在性能，内聚性，可重用性和可伸缩性方面更好？

Answer 1

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

首先，如果您将部分放在服务器上或ng-template中并使用ng-include包含它们，结果是相同的，并且两者都缓存在$ templateCache中。因此，即使从服务器加载部分可能看起来较慢，也可以执行一次。我建议如果你有一个体面的大小，请不要使用ng-template并从服务器加载它。

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

当你想要一个需要跨页面使用的组件时，指令会很有用，你的页眉和页脚导航不适合这个帐单，因为页面上有这些元素的单个实例。

希望它有所帮助。

Answer 2

我更喜欢指令，因为ng-include只将视图部分分解为更小的模块。通过使用指令，即使它只使用一次，您仍然可以很好地将页面模块化为更小的独立组件。父页面的标记看起来更好，并且您不必使用更多方法使控制器混乱。通过一些技巧，您甚至可以通过范围处理特定于指令的事件和远程调用。$ digest（而不是默认的$ rootScope.digest），这将更好地提高性能。此外，如果需要，您的指令可以直接进行DOM操作。

Answer 3

我将视图中的两者的性能与大型嵌套列表（最多1000个条目，4个深度）进行了比较。

结论

在渲染大型数据结构时，指令在 50 - 100％之间的速度比ng-include快。如果你必须渲染很多复杂/嵌套数据，特别是递归的东西 - 请使用指令。

对于功能元素（小部件，过滤器输入等），指令更适用，因为您的逻辑位于模块中，而不会浮动在控制器的某个位置。

有关递归的更多参考，请参见此处：Recursion in Angular directives

当您尝试将应用程序划分为逻辑部分（标题，侧边栏等）时，ng-include可能更好。要记住的一件事是通过ng-include更容易访问控制器的范围。有了指令，有时候会有点棘手。

ng-include，ng-template或directive：哪一个更适合性能

3 个答案:

结论