gui*_*ebl 14 performance angularjs angularjs-directive angularjs-ng-include
我想知道设计一个关于性能的角度应用程序的最佳方法,用于构建具有可重用小部件(如标题,侧边栏,页脚等)的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>......？
哪一个在性能,内聚性,可重用性和可伸缩性方面更好,以便在每个屏幕上嵌入这些小部件？
Cha*_*ani 16
您的选择目前不需要由性能决定.
首先,如果您将部分放在服务器上或ng-template使用ng-include结果包含它们,并且两者都缓存在$ templateCache中.因此,即使从服务器加载部分可能看起来较慢,也可以执行一次.我建议如果你有一个体面的大小部分不使用ng-template并从服务器加载它.
根据您的页面结构,至少您不需要使用指令的页眉和页脚,这些控件只有一个呈现.标准ng-include的部分和可能是链接的控制器.记住ng-include它本身就是一个指令,所以没有必要比较它们的性能.
如果您需要跨页面使用的组件,您的页眉和页脚导航不适合此帐单,因为指令在页面上有这些元素的单个实例时非常有用.
希望能帮助到你.
小智 8
我更喜欢指令,因为ng-include只将视图部分分解为更小的模块.通过使用指令,即使它只使用一次,您仍然可以很好地将页面模块化为更小的独立组件.父页面的标记看起来更好,您不必使用更多方法使控制器混乱.通过一些技巧,您甚至可以通过范围处理特定于指令的事件和远程调用.$ digest(而不是默认的$ rootScope.digest),这将更好地提高性能.此外,如果需要,您的指令可以直接进行DOM操作.
小智 6
我将视图中的两者的性能与大型嵌套列表进行了比较(最多1000个条目,深度为4个级别).
指令比渲染大型数据结构快50到100%ng-include.如果你必须渲染很多复杂/嵌套的数据,特别是递归的东西 - 请使用指令.
此外,对于功能元素(小部件,过滤器输入等),指令更适用,因为您的逻辑位于模块中,而不是浮动在控制器中的某个位置.
有关递归的更多参考,请参阅此处:Angular指令中的递归
当你只是试图将你的应用程序划分为逻辑部分(标题,侧边栏等)ng-include可能更好.要记住的一件事是,通过访问控制器的范围更容易ng-include.有了指令,有时候会有点棘手.
| 归档时间： |
|
| 查看次数： |
16982 次 |
| 最近记录： |