提问



我理解ng-showng-hide会影响元素上的类集,而ng-if控制元素是否作为DOM的一部分呈现。


是否有选择ng-if而不是ng-show/ng-hide的指导方针,反之亦然?

最佳参考


取决于您的用例,但总结一下差异:



  1. ng-if将从DOM中删除元素。这意味着您的所有处理程序或附加到这些元素的任何其他内容都将丢失。例如,如果将单击处理程序绑定到其中一个子元素,当ng-if计算为false时,该元素将从DOM中删除,并且您的单击处理程序将不再起作用,即使在ng-if之后也是如此计算结果为true并显示元素。您需要重新附加处理程序。

  2. ng-show/ng-hide不会从DOM中删除元素。它使用CSS样式来隐藏/显示元素(注意:您可能需要添加自己的类)。这样,附在子身上的处理程序就不会丢失。

  3. ng-if创建子范围,而ng-show/ng-hide



不在DOM中的元素对性能影响较小,使用ng-ifng-show/ng-hide相比,您的Web应用程序似乎更快。根据我的经验,差异可以忽略不计。在同时使用ng-show/ng-hideng-if时可以使用动画,并在Angular文档中使用两个示例。


最后,您需要回答的问题是您是否可以从DOM中删除元素?

其它参考1


请参阅此处了解CodePen,它展示了ng-if/ng-show如何工作的差异,DOM-wise。[22]


@markovuksanovic很好地回答了这个问题。但我从另一个角度来看它:我总是使用ng-if并从DOM中获取这些元素,除非:



  1. 由于某种原因,你需要数据绑定和$watch - 你的元素保持活跃而它们不可见。如果你想能够检查有效性,表格可能是一个很好的例子对于当前不可见的输入,以确定整个表格是否有效。

  2. 你正在使用条件事件处理程序的一些非常精细的有状态逻辑,如上所述。那说,如果你发现自己手动附加和分离处理程序,这样你就会失去重要状态你使用ng-if,问问自己这个状态是否会在数据模型中得到更好的表示,并且无论何时呈现元素,处理程序都会通过指令有条件地应用。换句话说,处理程序的存在/不存在是状态数据的一种形式。从DOM中获取数据,并将其传输到模型中。处理程序的存在/不存在应由数据确定,因此易于重新创建。



Angular写得非常好。它的速度很快,考虑到它的作用。但它的作用是让一大堆神奇的东西(如双向数据绑定)看起来很简单。让所有这些东西看起来很容易带来一些性能开销。令人震惊地意识到,在$digest周期中,在没有人看到的一大块DOM上,有多少数百或数千次的setter函数被评估。然后你意识到你已经有数十或数百个看不见的元素做同样的事情......


桌面可能确实足够强大,可以使大多数JS执行速度问题没有实际意义。但是如果你正在开发移动设备,那么使用ng-if只要人性化,就应该是一个明智的选择。在移动处理器上,JS速度仍然很重要。使用ng-if是一种非常简单的方法,可以非常非常地获得潜在的重要优化低成本。

其它参考2


根据我的经验:


1)如果您的页面有一个使用ng-if/ng-show来显示/隐藏某些内容的切换,则ng-if会导致更多的浏览器延迟(更慢)。例如:如果您有一个用于在两个视图之间切换的按钮,则ng-show似乎更快。


2)ng-if在评估为true/false时创建/销毁范围。如果你有一个连接到ng-if的控制器,那么每次ng-if评估为真时都会执行该控制器代码。如果您使用ng-show,则控制器代码仅执行一次。因此,如果您有一个在多个视图之间切换的按钮,则使用ng-if和ng-show会对编写控制器代码的方式产生巨大影响。

其它参考3


答案并不简单:


它取决于目标机器(移动与桌面),它取决于您的数据的性质,浏览器,操作系统,它运行的硬件......如果您真的想知道,您将需要进行基准测试。


它主要是一个内存与计算问题......与大多数性能问题一样,重复元素(n)就像列表一样,差异会变得很大,特别是当嵌套时(nxn,或更糟糕的)以及你在这些元素中运行的计算:



  • ng-show :如果这些可选元素经常出现(密集),比如90%的
    时间,让它们准备好并且只显示/隐藏它们可能更快,特别是如果它们的内容便宜(只是纯文本,没有计算或加载)。这会消耗内存,因为它使用隐藏元素填充DOM,但只显示/隐藏已存在的内容可能是浏览器的廉价操作。

  • ng-if :如果相反的元素可能不会被显示(稀疏),只需构建它们并实时销毁它们,特别是如果它们的内容很昂贵(计算/排序)/过滤,图像,生成的图像)​​。这对于稀有或按需元素是理想的,它在不填充DOM方面节省了内存,但可能耗费大量计算(创建/销毁元素)和带宽(获取远程内容)。它还取决于您在视图中计算的数量(过滤/排序)与模型中已有的数量(预先排序/预过滤数据)。


其它参考4


一个重要的说明:


ngIf(与ngShow不同)通常会创建可能产生意外结果的子范围。


我有一个与此相关的问题,我花了很多时间来弄清楚发生了什么。


(我的指令是将其模型值写入错误的范围。)


因此,为了保存你的头发,只需使用ngShow,除非你跑得太慢。


无论如何,性能差异几乎不可察觉,我不确定在没有测试的情况下是谁的优惠......

其它参考5


如果使用ng-show or ng-hide,将加载内容(例如来自服务器的缩略图),而不管表达式的值如何,但将根据表达式的值显示。


如果使用ng-if,仅当ng-if的表达式计算为真时才会加载内容。


在您要从服务器加载数据或图像并仅根据用户交互显示这些数据或图像的情况下,使用ng-if是一个好主意。这样,您的页面加载不会被不必要的新密集任务阻止。

其它参考6


ng-if在ng-include和ng-controller上会产生重大影响
在ng-include上它不会加载所需的部分,除非flag为true,否则不会处理
在ng-controller上,除非flag为true,否则它不会加载控制器
但问题是当一个标志在ng中变为假时 - 如果它将从DOM中删除当标志变为真时它将重新加载DOM在这种情况下ng-show更好,一次显示ng-if更好