display:none和*ngIf ='false'之间有什么区别？

Question

这display:none是css表.它将
从DOM树中删除元素.该ngIf = 'false'还删除DOM树元素.他们之间有什么区别？

Answer 1

display:none

From MDN Web Docs

该值none使您可以关闭元素的显示。当您使用时none，所有后代元素也会关闭其显示。呈现的文档就像元素在文档树中不存在一样。

但是，当使用dev工具查看页面的DOM时，DOM树中仍然存在元素。这意味着元素不会完全从DOM树中删除。

*ngIf="false"

从DOM树中完全删除元素。因此，在页面呈现方面，请与进行比较display:none，*ngIf="false"以更快的页面呈现提供更好的性能。

From Angular Guide

该ngIf指令不会使用CSS隐藏元素。它从DOM中物理地添加和删除它们。使用浏览器开发人员工具检查DOM确认这一事实。

当条件为时，从DOM中删除其宿主元素false，NgIf将其与DOM事件（它所创建的附件）分离，将组件与Angular更改检测分离，并销毁它。可以对组件和DOM节点进行垃圾收集并释放内存。

以下图片将很好地描述它们

1）不使用display:none和*ngIf="false"

2）使用display:none和*ngIf="false"

隐藏（display:none）与删除（*ngIf='false'）的比较

From Angular Guide

隐藏和删除之间的区别对于简单的段落而言并不重要。主机元素何时连接到资源密集型组件，这确实很重要。即使隐藏，此类组件的行为也会继续。组件保持附加到其DOM元素。它一直在监听事件。Angular会继续检查可能影响数据绑定的更改。无论组件在做什么，它都会继续工作。

尽管不可见，但该组件及其所有后代组件占用了资源。性能和内存负担可能很大，响应能力可能下降，并且用户看不到任何东西。

从积极的一面看，再次显示该元素是很快的。组件的先前状态将保留并准备显示。该组件不会重新初始化-这可能是昂贵的操作。因此，隐藏和显示有时是正确的选择。

但是，在没有足够的理由让它们保持不变的情况下，您的首选应该是删除用户看不到的DOM元素，并使用诸如的结构指令来恢复未使用的资源NgIf 。

这些相同的考虑因素适用于每个结构指令，无论是内置指令还是自定义指令。在应用结构指令之前，您可能需要暂停片刻，以考虑添加和删除元素以及创建和销毁组件的后果。

希望这可以帮助您了解它们之间的区别。

Answer 2

display: none; 不会阻止浏览器呈现该元素.

ngIf = "false"将阻止该项目首先被渲染.如果/当ngIf计算结果为true时,该元素将呈现,如果表达式再次变回false,则元素将完全从DOM树中删除.

事实并非如此display:none;.这只会导致元素不显示并且应用了任何其他CSS.display:none;不会影响页面呈现/加载的速率.

这意味着理论上加载页面的速度会更快ngIf.