如何防止导航栏抽动？

Question

我正在做一个小型个人项目，但有一个小问题，我不确定该如何解决。我使用Bootstrap4，ejs templating engine和express。我的项目有一个Navbar，如果用户未登录，则显示Sign in，反之则显示Account。

这里是导航栏的相关部分：

<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>

这是控制在客户端显示的内容的功能：

  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'
    }
  }

我的问题是Navbar处于“抽搐”状态，因为它首先加载HTML，然后隐藏了不应显示的内容。我可以通过检查服务器上的cookie，然后有条件地渲染Navbar的一部分来修复它，但是我认为这样做不是一个好主意。我将不胜感激任何建议。

Answer 1

首先隐藏所有条件内容（这样就不会显示任何内容，然后再使用条件Javascript来显示适当的部分。

1. 默认情况下，在HTML中隐藏整个工具栏，直到您运行条件代码，然后仅在Java语言的结尾确定状态后才显示整个工具栏。如果需要，可以将工具栏设置为visibility: hidden而不是display: none，以便它仍占据适当的垂直高度，并且在最终显示时不会导致其他内容下移。

2. 在工具栏HTML之后立即在内联<script>标记中内联运行条件脚本。这将确保脚本在工具栏HTML可用后尽快运行。您可以将其与上面的＃1或＃2结合使用。

3. 确定正确的工具栏服务器端，以便到达浏览器的HTML已经正确地形成了。由于服务器已经知道用户是否登录，因此应该可以。