我有12个网页，每个网页都有一组7-10个按钮。按钮后面和周围的代码是6-7行 HTML 。
为了简化编码，我在每个指令中使用简单的内联模板将这些指令变为指令。
页面打开时是否有很多开销，并且必须将所有元素转换为指令？
这样做的流程是什么？它会减慢页面的渲染速度吗？
我正在做什么，对于指令来说这是一个好习惯，还是有更好的方法可以做到？
答案 0 :(得分：7)
1）是的，有开销：指令在 Angular的摘要周期 期间呈现为标记。一旦框架加载，第一个循环将运行。加载的开销可能很大。第一个摘要周期将很快运行。
关于多少开销的答案取决于您是否打算在任何页面上使用 AngularJS 。如果无论如何都要加载libararies和框架，那么开销很小。加载lib并启动框架通常会在页面完全呈现之前略微停顿。
另一方面，如果您的网页已使用 AngularJS 框架，那么 HTML指令的开销没有模型属性很小。当您有许多绑定模型属性时会发生大量开销。然后框架必须观察您的模型属性，并在每次更改时运行摘要周期
2）这是个好主意吗？是的。没有。的种类。这取决于。您是否已经为页面使用 AngularJS （定期主题）？如果是，那么这是非常好的做法。您可以通过低级别的成本进行多级封装，并鼓励您自由地进行封装。
如果您已经在使用Angular和＃34;持久＆＃34;摘要周期，然后封装一些可重复使用的 HTML ，成本低廉。在摘要循环的第一轮中，框架用渲染标记替换指令。有一点费用（最低限度），但所有代码重复使用费用。在这种情况下，它将是 minimal 。
3）如果您想在不使用AngularJS的1个或多个页面上重复使用此代码：在这种情况下，成本可能不值得。这又取决于它。也许如果10页使用Angular而2则不使用Angular，您可能仍然喜欢使用 AngularJS 指令。
但是，如果您的网页都不需要该框架，或者大多数（12个中的10个）不需要，那么您最好使用 HTML5 template
答案 1 :(得分：5)
答案 2 :(得分：4)
我尝试了一个示例演示，是的，在使用指令渲染元素时需要花费更多时间（这很明显，因为角度处理会花费一些时间将自定义标记渲染为有效的html）
这是一个演示使用angular来使用指令渲染元素：
Rendering elements using angular
这是另一个使用纯HTML
的人Rendering elements without angular
我为这两个例子提供了相同数量的元素，以确保我们有相同的比较。您可以在控制台上查看所消耗的时间。平均而言，考虑两个示例渲染元素在渲染时没有角度的情况下快5-10毫秒。
请注意，我已在两个示例中定义了app模块，以维持加载角度模块所需的时间。我通常只在html太长时使用指令，或者在你的情况下经常重复使用指令。如果时间性能对你来说太关键了，而你真的希望元素加载得更快，我建议使用纯HTML。
更新1
上面的例子只有简单的标记，没有任何花哨的东西。在我们可能传递自定义属性和编译元素的真实场景中（使用$compile），时差可能会更高。
更新2
我遇到了这个awesome description指令，它们显示了如何在网页上注入，编译和执行指令。我认为这涵盖了可能是Angular中指令如何工作的最佳资源。
答案 3 :(得分：4)
正如@I_Debug_Everything答案所示，对于基本的html模板，会有轻微的惩罚。 5-10ms会有明显的性能差异，我想不会。
但是，您还需要考虑其他因素，这些因素可能会或可能不会在您的设置中发挥作用。
这些都是您需要考虑的因素。