防止/从首页加载中消除闪烁

Question

我一直在使用NuxtJS在生成的静态网站上工作，在该网站上，用户可以选择是否使用暗模式，或者只使用默认的CSS媒体查询选择器。的代码如下：

<template>
  <div class="container">
    <vertical-nav />
    <!-- wrapper for content; when state is updated, only then is the class added -->
    <div id="content-wrapper" :class="colorScheme !== null ? colorScheme : ''">
      <nuxt />
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import VerticalNav from '@/components/VerticalNav.vue';

export default {
  components: {
    VerticalNav,
  },
  // Vuex state that stores ui preference, by default null
  computed: mapState(['colorScheme']),
  mounted() {
    // Vuex mutation to set initial state
    this.getPreferredColorScheme();
  },
  methods: mapMutations(['getPreferredColorScheme']),
};

我已经注意到，对于第一页加载，网页将闪烁/闪烁as shown in this screen recording。请注意，这是关闭缓存的。

[进一步的调查表明，只有在用户首次访问该网站时才会发生这种情况，因为随后的访问/刷新似乎不会触发此行为。我怀疑这可能与此water fall建议的字体加载和随后的重排有关。请注意，此处并没有使用display=swap。此外，从Chrome的分析器data中看来，浏览器似乎在闪烁时决定重新计算样式并布局页面中的所有节点（相关时间从4.26秒到4.32s）。

我要问的是我如何添加可选类导致不可见文本闪烁/闪烁？如果类绑定不是问题，那是什么原因，我有什么可以解决的？

Answer 1

这可能有很多事情，如果您打开检查器以显示是否有任何加载失败，这将更有帮助。

话虽如此，闪烁不是由页面加载引起的，而是由您的“夜间模式”切换引起的，该切换是在页面加载后切换的。

如果您希望页面以“夜间模式”加载，则可以考虑以这种方式加载它，而不是在加载时触发它。