2

我一直在使用 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']),
};

我注意到对于第一页加载，网页会闪烁/闪烁，如屏幕录制中所示。请注意，这是在缓存关闭的情况下。

进一步的调查表明，这仅发生在用户第一次访问该站点时，因为后续访问/刷新似乎不会触发此行为。我怀疑这可能与加载字体和随后的回流有关，正如瀑布所暗示的 那样。请注意，display=swap此处未使用且不需要。此外，从 Chrome 的这个分析器数据来看，似乎在闪烁周围，浏览器决定重新计算样式并布局页面中的所有节点（相关时间从 4.26 秒到 4.32 秒）。

我要问的是我如何添加可选类引起的不可见文本的闪烁/闪烁？如果类绑定不是问题，原因是什么？我能做些什么吗？

编辑：进一步检查，这种行为似乎只发生在 Chrome 中，并且可能与我拥有的自托管字体有关。Firefox 和 Safari 没有这种重绘行为。

4

1 回答 1

0

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

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

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

于 2020-06-16T08:44:52.453 回答