Performance ng include、ng模板或指令：哪一个对性能更好_Performance_Angularjs_Angularjs Directive_Angularjs Ng Include

Performance ng include、ng模板或指令：哪一个对性能更好

performance angularjs

Performance ng include、ng模板或指令：哪一个对性能更好,performance,angularjs,angularjs-directive,angularjs-ng-include,Performance,Angularjs,Angularjs Directive,Angularjs Ng Include,我想知道在性能方面设计angular应用程序的最佳方法，用于使用可重用的小部件（如页眉、侧边栏、页脚等）构建HTML模板。基本上，主要内容是中心DIV，它的内容在不同路线之间变化，页眉和页脚几乎总是相同的，侧边栏在某些页面中可能会有所不同 ---index.html <body ng-cloak> <div data-ng-include data-src="'partials/template/header.html'"></div> <div

我想知道在性能方面设计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>

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


// ... HTML内容

在$templateCache中包含header.html是否更好？例如：

--header.html

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

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


// ... HTML内容

甚至我应该为每个小部件使用指令，比如：

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

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

首先，如果您将分区放在服务器上或

ng template

中，并使用

ng include

将其包括在内，则结果是相同的，两者都缓存在$templateCache中。所以，即使从服务器加载部分数据看起来比较慢，也只需执行一次。我建议如果您有一个合适的部分大小，不要使用

ng模板

，并从服务器加载它

根据您的页面结构，至少对于不需要使用指令的页眉和页脚，这些控件只有一个呈现。标准的

ng包含

，带有一个部分控制器，可能一个链接控制器就可以了。请记住，

ng include

本身是一个指令，因此在性能上比较它们毫无意义

如果您需要跨页面使用组件，并且页眉和页脚导航不适合此账单，则指令将非常有用，因为页面上只有这些元素的一个实例

希望有帮助。

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

我在一个具有大型嵌套列表（最多1000个条目，4个级别）的视图中比较了这两种操作的性能

结论在渲染大型数据结构时，指令的速度介于50-100%之间，比

ng include

快。如果必须呈现大量复杂/嵌套数据，尤其是递归数据，请使用指令

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

有关递归的更多参考，请参见此处：

当您试图将应用程序划分为逻辑部分时（标题、边栏等），
ng include
可能更好。需要记住的一点是，通过
ng include
访问控制器的作用域更容易。对于指令，这有时会有点棘手。
ng include需要第一次从源代码中获取模板，然后才能使用模板缓存供将来使用。