重新安装与设置显示之间的性能和内存差异=“无”

Posted

技术标签:

【中文标题】重新安装与设置显示之间的性能和内存差异=“无”【英文标题】:Performance and memory difference between re-mounting vs setting display = "none" 【发布时间】:2021-12-23 04:29:29 【问题描述】:

我有一个用 React 编写的单页应用程序。该应用程序有多个页面,当用户单击导航栏上的选项卡时可以显示这些页面。所以有两种可能的设计:

    一次安装 1 个页面;每当用户通过单击选项卡在页面之间切换时卸载和重新安装。

    同时挂载所有页面,只显示选择的页面,其余设置为display = "none"

问题:

    在速度性能方面哪个更好。 在内存性能方面哪个更好。 什么是标准做法?

【问题讨论】:

您可以按需加载页面,然后在不再需要时隐藏它们,这样您就不需要两次加载同一页面。 看看React Router 是如何处理这个问题的可能会有用——虽然它们绑定到 URL 路由而不是路径,但我想这不会显着影响实现。 @Spectric 那么是Design 2? @free_lions_n_tigers_from_cages 这将是两者的结合。只在用户请求时加载页面,但是当用户请求另一个页面时,隐藏上一个页面,所以当用户请求上一个页面时,而不是再次加载它,只是显示它。 我没有关于性能的具体数据,但 React 是围绕第一个选项构建的,所以我认为可以安全地假设这是性能更高的方式(这绝对是标准做法)。随着您的应用程序的增长,维护第二种方法将非常混乱,并且您将与 React 的设计方式背道而驰 【参考方案1】:

我认为这与最佳实践或性能无关。这完全取决于您要达到的目标。

请记住以下几点:

安装/重新安装总是会重置组件的状态并重新运行 useEffect 挂钩(这在 react 的世界中非常有用)。这意味着如果您使用例如步进器并在步骤之间移动,假设您填写一些表单,然后前后移动,您的组件将失去其先前的状态并且您的表单将被清空(因为它们再次被挂载)。

但是,如果您使用 display = none,则组件的状态是持久的,并且您的表单将填充以前的值。 (很明显,您可以使用第一种方法实现相同的行为,但您需要付出一些努力才能做到这一点,这种努力会在以后为您节省一些时间)

我并不是说一个比另一个更好,但是在选择一个而不是另一个之前,你必须知道一些严肃的考虑

(不要使用 display=none 除非你有一些严重的 css 技巧)

【讨论】:

以上是关于重新安装与设置显示之间的性能和内存差异=“无”的主要内容,如果未能解决你的问题,请参考以下文章

IPC共享内存和线程内存的性能差异

iPhone:NSURLRequestCachePolicy 设置之间的性能差异

.where(...).Any() 与 ..Any(...) 之间的性能差异 [重复]

之间的用法差异。 a.out、.ELF、.EXE 和 .COFF

UIView: alpha:0, hidden:YES, removeViewFromSuperview 和 frame.origin.y = -100000 之间的性能/内存差异;

电脑启动后显示器没有反应,鼠标也无反应,键盘灯也不亮,怎么办?