angularjs - 与 DOM 中 ng-app/ng-controller 放置相关的 Angular View 性能

Question

我想知道如果我将 ng-app 和 ng-controller 属性放置从即 body 到某个具有更小的 DOM 子树的内页 block 元素？

假设我有一个很长的页面，其中包含大量内容，但只有部分内容是 Angular 提供的。其他所有内容都是服务器生成的，这意味着它从客户端 PoV 来看有些静态。

将 ng-app/ng-controller 只放在 Angular 实际执行的子节点上会更好吗？还是将它们放在 body 上会一样吗？这个很长的页面的元素？

Angular 是否只处理定义了 ng-app/ng-controller 的子 DOM 的 View ，还是处理整个 DOM？

是否有任何关于此的证据，甚至 Angular 文档？

Answer 1

理论上/可能吗？是的，正如 New Dev 提到的，bootstrap 函数将有一个更大的 DOM 来运行 compile，这将比编译较小的树花费更长的时间。

实际上？可能不是。但最好的选择是对您自己的页面进行基准测试。

作为实验，您可以尝试以下操作。我生成了一个简单的随机 DOM，并将其注入(inject)到 JSFiddle 中，从脚本加载开始，到 Controller 准备就绪时结束。在一个大得多的 5000 个节点的树旁边(作为兄弟)有一个小子树。

这是包裹整个 body 的 fiddle :http://jsfiddle.net/gruagq8d/

这是只使用小子集的 fiddle : http://jsfiddle.net/h0hod2j8/

对我来说，重复运行这些 fiddle 中的任何一个都会在大约 260 毫秒内收敛。

我也尝试过在真实的网页源(例如 StackOverflow 本身)上运行类似的代码，并发现了相同的结果(但是我没有发布任何这些结果，因为未经许可将其他人的真实页面发布到 JSFiddle 感觉不合适) - 你可以自己尝试一下，非常简单。

诚然，这并不遵循良好的基准测试方法，但如果包装大量额外的 DOM 节点导致性能显着不同，我仍然预计这些节点至少会存在一些差异。

我不认为额外的编译时间是一个问题；对于小型 DOM，它显然很快，而对于大型 DOM，与浏览器首先构建 DOM 所花费的时间相比，这是非常相关的。

总而言之，如前所述，您最好的选择是尝试使用您自己的页面运行类似的基准测试。

编辑:修改相同的基准来测试摘要周期表明，这些也没有显着差异:

最小换行:http://jsfiddle.net/fsyfn1ee/

包装整个 DOM:http://jsfiddle.net/04tdwxhp/