Javascript 如何防止导航栏抖动？

我正在做一个小的个人项目，我有一个小问题，我不知道如何解决。我使用

Bootstrap4

，

ejs模板引擎

和

express

。我的项目有一个导航栏，如果用户未登录，则显示登录，反之则显示帐户

以下是导航栏的相关部分：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto ">
    <li class="nav-item  navbar-item">
      <a class="nav-link" href="/">Home </a>
    </li>
    <li class="nav-item navbar-item">
      <a class="nav-link" href="/">Some link </a>
    </li>
    <li class="nav-item navbar-item " id="nav-signIn">
      <a class="nav-link" href="/signIn">Sign in</a>
    </li>
    <li class="nav-item dropdown  navbar-item" id="nav-account">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Account
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

---

我的问题是Navbar很“急促”，因为它首先加载HTML，然后隐藏不应该显示的内容。我可以通过检查服务器上的cookies来修复它，然后有条件地呈现部分Navbar，但我认为这样做不是一个好主意。如果有任何建议，我将不胜感激。

这里有许多选择。要知道推荐哪一个，我们可能需要使用您的实际站点并尝试一些方法。所有这些都会起作用，防止显示不应该显示的内容，有些可能会显示得更快

首先隐藏所有条件内容（这样就不会显示不应该显示的内容），然后使用条件Javascript启用相应部分的显示

默认情况下，在HTML中隐藏整个工具栏，直到您运行了条件代码，然后仅在Javascript结束时确定其状态后才显示整个工具栏。如果需要，您可以将工具栏设置为

可见性：隐藏

而不是

显示：无

，以便它仍然占据适当的垂直高度，并且在最终显示时不会导致其他内容下移

在工具栏HTML之后立即以内联

标记内联运行条件脚本。这将确保脚本在工具栏HTML可用后尽快运行。您可以将其与上面的#1或#2组合使用

确定适当的工具栏服务器端，以便到达浏览器的HTML已经正确地预先形成。因为服务器已经知道用户是否登录，所以这应该是可能的

---

为什么不使用CSS呢？与

#导航帐户一样，#导航登录{display:none；}

。如果你把它放在

头上的
样式
标记中，它应该会起作用。@grooveplex谢谢，但我不确定你的意思。我需要显示它们中的任何一个。对，然后一旦页面加载，您就可以使用原始代码显示其中的任何一个。我想您之所以看到这两个页面，是因为在页面上下文中下载、解析和执行JavaScript所花费的时间。谢谢，我已经实现了服务器端条件呈现。但现在我看到了更多的方法，我可能会改变它。
  function displayAccountOrSignIn() {
    if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
      document.querySelector('#nav-account').style.display = 'none'
    }
    else {
      document.querySelector('#nav-signIn').style.display = 'none'
    }
  }