Javascript 与内嵌式HTML相比，如果使用指令会有很大的开销吗？

我有12个网页，每个网页都有一组7-10个按钮。按钮后面和周围的代码是6-7行HTML

为了简化编码，我在每个指令中使用一个简单的内联模板将这些指令转换成指令

当一个页面打开并且它必须将我的所有元素转换为指令时，会有很多开销吗

另外，进行此操作的流程是什么？它会减慢页面的呈现速度吗

---

那么我正在做的是什么呢？这是指令的一种良好实践还是有更好的方法呢？

IMHO，使用6-7行通用html呈现多个小部件应该不会对性能造成太大影响。如果html有嵌套指令等，那将是另一个故事

我尝试了一个示例演示，是的，当使用指令呈现元素时，它确实需要多一点时间（这是显而易见的，因为角度过程将消耗一些时间来将自定义标记呈现为有效的html）

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

这是另一个使用纯html的

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

请注意，我在两个示例中都定义了

app

模块，以保持加载角度模块所需的时间。我通常只在html太长或在您的情况下经常重复时才使用指令。如果时间性能对您来说太关键，并且您确实希望更快地加载元素，我建议使用纯html

更新1
上面的例子只有简单的标记，没有什么特别之处。在实际的word场景中，我们可能传递自定义属性并编译元素（使用

$compile

），时差可能会更高

更新2

---

我遇到了这些指令，它们显示了如何在网页上注入、编译和执行指令。我认为这涵盖了指令如何在Angular中工作的最好资源。

正如@I_Debug_Angular Angular Angular所示，对于基本html模板，有一个轻微的惩罚。我认为5-10毫秒是否会对性能产生显著影响

但是，您还需要考虑其他因素，这些因素可能在设置中起作用，也可能不起作用

• 使用指令，您将共享指令模板，因此从服务器接收的数据量小于标准HTML，在标准HTML中，HTML将复制到要显示公共元素集的页面上的每个页面和部分
• 使用指令，您可以使用单个模板对模板进行任何更改，从而提高生产率
• 您可以对指令进行单元测试
• 指令可以使HTML更具可读性
• Web组件是标准的发展方向。Angular 2.X本应支持这一点

这些都是您还需要考虑的因素。

1）是的，存在开销：指令在Angular的摘要周期中呈现为标记。加载框架后，第一个周期将运行。装载时的开销可能很大。第一个摘要周期将快速运行

关于多少开销的答案取决于您是否打算在任何页面上使用AngularJS。如果无论如何都要加载库和框架，那么开销是最小的。加载libs并启动框架通常会在页面完全呈现之前稍微有一点明显的停顿

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

2）这是个好主意吗？是的。不，有点。视情况而定。您是否已经在页面（重复主题）中使用了AngularJS？如果是，那么这是非常好的做法。您可以使用低成本实现多个级别的封装，我们鼓励您这样做

如果您已经在使用角度和“持久”的摘要周期，那么封装一些可重用的HTML，成本很低。在摘要周期的第一轮，框架用呈现的标记替换指令。虽然成本很低，但所有代码的重复使用都有成本。在这种情况下，它将是最小的

3）如果您想在一个或多个不使用AngularJS的页面上重复使用此代码：在这种情况下，成本可能不值得。这要看情况而定。如果有10页使用AngularJS，还有2页不使用AngularJS，您可能仍然喜欢使用AngularJS指令

---

但是如果您的页面都不需要框架，或者大多数（12个页面中的10个页面）不需要框架，那么您最好使用

“按钮背后和周围的代码是6-7行HTML”-它们是什么类型的按钮？对于按钮而言，html似乎太多：）