我一直在使用 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 没有这种重绘行为。