问与内联HTML相比，如果我使用指令，会有很大的开销吗？

EN

1)是的，存在开销:在的角摘要周期期间，指令被呈现为标记。一旦框架加载，第一个周期将运行。装载时的开销可能很大。第一个消化周期将快速运行。

多少开销取决于您是否打算在任何页面上使用AngularJS。如果无论如何都要加载库和框架，则开销是最小的。加载库并启动框架通常会在页面完全呈现之前稍显着地暂停。

另一方面，如果您的页面已经使用了AngularJS框架，则没有模型属性的HTML指令的开销很小。当您有许多绑定模型属性时，就会发生大量开销。然后，框架必须监视模型属性，并在每次更改的摘要周期中运行。

2)这是个好主意吗？是的。不是的。有点。那得看情况。您是否已经将AngularJS用于页面(反复出现的主题)？如果是的话，这是很好的做法。您可以以较低的成本进行许多级别的封装，并且鼓励您这样做。

如果你已经使用了棱镜和“经久耐用”的消化周期，那么封装一些可重用的HTML，成本就会很低。在Digest循环的第一轮中，框架用呈现的标记替换指令。虽然成本很小(很小)，但是所有的代码重用都花费了。在这种情况下，它将是最小的。

3)如果您想在1页或几个不使用AngularJS:的页面上重复使用这段代码，那么代价可能不值得。这又要看情况了。也许如果10页使用角，另外2页不使用，您可能仍然喜欢使用AngularJS指令。

但是，如果您的页面都不需要框架，或者大多数页面(12页中的10页)不需要框架，那么使用HTML5模板可能更好

IMHO，使用6-7行通用html呈现多个小部件不会对性能造成太大的损害。如果html有嵌套指令等等，那就另当别论了。

我尝试了一个示例演示，是的，在使用指令呈现元素时确实需要更多的时间(这很明显，因为角进程将花费一些时间将自定义标记呈现为有效的html)。

下面是一个使用角来使用指令渲染元素的演示：

用角绘制元素

下面是另一个使用纯html的

无角渲染元素

我为这两个例子提供了相同数量的元素，以确保我们有一个相同的比较。您可以在控制台上看到消耗的时间。平均而言，考虑到这两个例子，渲染元素的渲染速度要快5-10毫秒，而没有角度渲染。

注意，我在这两个示例中都定义了app模块，以保持加载角模块所需的时间。我通常只在html太长或经常重复的情况下使用指令。如果时间性能对您来说太关键了，并且您真的希望这些元素加载得更快，我建议使用纯html。

更新1

上面的例子只有简单的标记，没有什么特别之处。在真实的场景中，我们可能传递自定义属性并编译元素(使用$compile)，时差可能会更大。

更新2

我看到了这个指令的惊人的描述，它展示了如何在网页上注入、编译和执行指令。我认为这涵盖了关于指令是如何在角度上工作的最好的资源。