我正在使用AngularJS 1.0.8。
问题：我有一个动态网站，可以从各种组件或小部件构建：段落，文本块，图像，超链接和表格。 段落是更多组件的容器。表也是一种容器 - 它可以容纳其他组件，并将它们排列为数据网格。
网站不是静态的，即我没有这些组件的预定义布局。 相反，我在启动时获得了一个JSON，它指定了组件的布局。
最初，我有一个每个这样的组件的指令，使用该指令的模板，偶尔使用$ compile为更复杂的组件更改DOM。 对于'容器'组件 - 段落和表 - 我使用ngRepeat来呈现该容器组件中包含的所有组件。
这在性能方面存在问题。这个网站需要花费很多秒才能在Chrome / Firefox上加载，花费的时间主要用在AngularJS渲染机制上（不在IO中，我想）。
所以我决定改变这些组件的指令。而不是使用ngRepeat，这不是真正必要的，因为我不需要双向绑定（网站中的内容不是交互式的，无法更改，所以我只需要渲染一次，非常像servlet ） - 我自己在指令中构建了HTML字符串，使用普通的JS，迭代模型中存在的所有包含的组件，最后我编译并链接它。
结果还不够好。 对于一些数量较少的细胞表，在现代Chrome / Firefox中连接约500 milis，在IE9中连接约4000 mil，在IE8中约需15,000 milis，IE7仍在渲染，所以我无法给你时间：）
我认为问题可能在于广泛使用指令
一个简单的：
<div my-table-component data="data"></div>
元素会在<table>标记中生成30-40个<tr>标记，每个标记包含10个<td>标记，并且每个标记都会有一个<div my-text-component>标记1}}或<div my-image-component>然后必须自己编译和链接（因为它有一个指令）。
我虽然因为我的网站开头并不是互动的，所以我真的不需要这个。 也许我可以避免为每个组件使用指令，只留下容器组件的指令。在这些指令中，我将创建每个可能的其他组件的实际HTML模板，而不是使用那样做的指令。
这让我从AngularJS的想法向另一个步骤转向servlet的想法。它有点糟糕。 所以也许你们其中一个人可以为我提供更好的方法......也许性能问题甚至不存在？即使有这么多的项目，也许使用指令（并希望ngRepeat）可以很好地表现性能？除了使用Chrome的开发者工具，Firebug和Chrome的Batarang AngularJS扩展（没有一个真正指导我以高效的方式）之外，也许有更好的方法来制作富有洞察力的性能基准测试。
答案 0 :(得分：1)
使用大量嵌套指令本身不是问题，但任何广泛的绑定都可能产生巨大影响。
如果有人仍然在寻找一个使用Angular 1.3+的aswer，那么OP可以通过首先对所有元素使用一次性绑定来解决他的问题，他说这些元素有＆＃34;不需要两个 - 方式绑定＆＃34;，使用::binding语法。
此外，我建议尝试使用本网站上惊人的分析片段来确定哪些绑定确实特别慢：http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html
最后，在Angular中经常花费大部分时间，特别是在构建大型重复表时，是编译阶段。因此，如果可能的话，尝试仅构建有限数量的元素（使用limitTo），然后在用户滚动时加载更多元素。许多指令解决了这个问题（寻找＆＃34;无限滚动＆＃34;）
总而言之，我认为仍然值得尝试优化Angular应用程序而不是转换为原生JS，大部分时间滞后来自开发人员的错误：某些应用程序有数千名观察者并且运行得非常顺利（*咳嗽*像我的*咳嗽*）。